bootstrap 通过加减按钮实现输入框组功能

bootstrap 通过加减按钮实现输入框组功能 在 Bootstrap 框架中，经常需要实现输入框组的添加和删除功能，以满足不同的业务需求。本文将介绍如何使用 Bootstrap 实现输入框组的加减按钮功能，包括增加和删除输入框组的实现代码和思路。 需要了解 Bootstrap 的输入框组（Input Group）组件，该组件用于将输入框、标签、按钮等元素组合在一起，以提供更好的用户交互体验。在这里，我们将使用该组件来实现输入框组的加减按钮功能。 实现思路： 1. 需要创建一个输入框组容器，用于容纳输入框组的各个元素。 2. 然后，需要添加一个加号按钮（+），用于触发添加输入框组的事件。 3. 在加号按钮的点击事件中，需要生成新的输入框组元素，并将其添加到容器中。 4. 同时，需要添加一个减号按钮（-），用于触发删除输入框组的事件。 5. 在减号按钮的点击事件中，需要删除当前输入框组元素。 实现代码： HTML 代码： ```html <div class="input-group" id="centerIpGroup"> <label class="input-group-addon" id="basic-addon5">中心机IP:</label> <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled> <span class="glyphicon glyphicon-plus"></span> </button> </div> ``` JavaScript 代码： ```javascript // 添加中心机IP输入框项 function addCenterIpGrp(obj) { html = '<div class="input-group centerIp">'+ '<label class="input-group-addon">IP：</label>'+ '<input type="text" class="form-control" id="ipInput">'+ '<label class="input-group-addon">注释：</label>'+ '<input type="text" class="form-control" id="descInput">'+ '<span class="input-group-btn">'+ '<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp">'+ '<span class="glyphicon glyphicon-minus"></span>'+ '</button>'+ '</span>'+ '</div>'; obj.insertAdjacentHTML('beforebegin', html); } // 删除中心机IP输入框项 $(document).on('click', '#delCenterIpGrp', function() { var el = this.parentNode.parentNode; var centerIp = $(this).parent().parent().find('#ipInput').val(); alertify.confirm('您确定要删除选中的命令？', function(e) { if (e) { el.parentNode.removeChild(el); } }); }); ``` 通过上述代码，我们可以实现输入框组的加减按钮功能，包括增加和删除输入框组的功能。同时，我们也可以根据实际业务需求进行自定义和扩展。 本文介绍了 Bootstrap 中输入框组的加减按钮功能的实现方法，提供了一种灵活的解决方案，以满足不同的业务需求。如果您有任何疑问或需要更多帮助，请随时与我们联系。