正文

学会Bootstrap表单添加行：轻松实现动态表单元素添加与删除

/0 浏览量
0416

在网页设计中，表单是用户与网站交互的重要方式。Bootstrap框架提供了丰富的表单组件，使得表单的设计和实现变得更加简单高效。本文将重点介绍如何使用Bootstrap实现表单元素的动态添加与删除功能。

动态添加表单元素

要实现动态添加表单元素，我们首先需要在HTML中创建一个基本的Bootstrap表单结构。以下是一个简单的表单示例：

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="请输入姓名">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="请输入邮箱">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-primary add-row">添加行</button>
    </div>
  </div>
</form>

在上面的代码中，我们创建了一个包含姓名和邮箱字段的表单，并添加了一个“添加行”按钮。

接下来，我们需要通过JavaScript来添加事件监听器，以便在点击按钮时动态添加新的表单元素。以下是一个简单的JavaScript代码示例：

document.querySelector('.add-row').addEventListener('click', function() {
  var formGroup = document.createElement('div');
  formGroup.className = 'form-group';

  var label = document.createElement('label');
  label.className = 'col-sm-2 control-label';
  label.textContent = '姓名';

  var input = document.createElement('input');
  input.className = 'col-sm-10 form-control';
  input.type = 'text';
  input.placeholder = '请输入姓名';

  formGroup.appendChild(label);
  formGroup.appendChild(input);

  document.querySelector('form').appendChild(formGroup);
});

在上面的代码中，我们首先获取到添加行的按钮，然后为它添加了一个点击事件监听器。在事件处理函数中，我们创建了一个新的表单组元素，并添加了标签和输入框。最后，我们将新的表单组添加到表单中。

动态删除表单元素

与添加表单元素类似，删除表单元素也需要使用JavaScript。以下是一个简单的JavaScript代码示例：

document.querySelectorAll('.form-group').forEach(function(formGroup) {
  var removeBtn = document.createElement('button');
  removeBtn.className = 'btn btn-danger remove-row';
  removeBtn.textContent = '删除';

  var colSm10 = formGroup.querySelector('.col-sm-10');
  colSm10.appendChild(removeBtn);

  removeBtn.addEventListener('click', function() {
    formGroup.remove();
  });
});

在上面的代码中，我们首先获取到所有的表单组元素，并为它们添加了一个删除按钮。然后，我们为删除按钮添加了一个点击事件监听器，用于删除对应的表单组。

通过以上代码，我们可以实现Bootstrap表单元素的动态添加与删除功能。在实际项目中，可以根据需求对代码进行修改和扩展。

-- 展开阅读全文 --