Question

我想开发一个包含多个输入字段行的表单。我正在使用jQuery来实现这一目标。问题是当我点击添加行按钮时，新行很快就会从页面中消失。这些行在页面上不是永久性的。我该怎么做才能让他们留在页面上？

$("#addrows").click(function() {
  var html = '';
  html += '<tr>';
  html += '<td></td>';
  html += '<td></td>';
  html += '<td> <input type="text" name="task[]" id="task" placeholder="Task" /></td>';
  html += '<td> <input type="number" name="time[]" id="time" value="0" style="width:40px;" /></td>';
  html += '<td> <button class="remove">Remove</button></td></tr>';

  $("#table-items").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form>
  <div class="table-responsive" id="div1">
    <table id="table-items" class="table bordered-table" border="1">
      <tr>
        <td>Select Project</td>
        <td>Select Activity</td>
        <td>Task description</td>
        <td>Time (hrs)</td>
        <td><button id="addrows">Add Rows</button> </td>
      </tr>
    </table>
</form>

Answer 1

问题是因为默认情况下button元素为type="submit"，这意味着您的form元素正在刷新页面。您的remove按钮也会发生同样的情况。

要解决此问题，请在按钮中添加type="button"属性：

$("#addrows").click(function() {
  var html = '';
  html += '<tr>';
  html += '<td></td>';
  html += '<td></td>';
  html += '<td><input type="text" name="task[]" id="task" placeholder="Task" /></td>';
  html += '<td><input type="number" name="time[]" id="time" value="0" style="width:40px;" /></td>';
  html += '<td><button type="button" class="remove">Remove</button></td></tr>';

  $("#table-items").append(html);
});

$('#div1').on('click', '.remove', function() {
  $(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form>
  <div class="table-responsive" id="div1">
    <table id="table-items" class="table bordered-table" border="1">
      <tr>
        <td>Select Project</td>
        <td>Select Activity</td>
        <td>Task description</td>
        <td>Time (hrs)</td>
        <td><button type="button" id="addrows">Add Rows</button> </td>
      </tr>
    </table>
  </div>
</form>

另请注意，我在您的HTML中添加了缺少的</div>标记，以及用于删除每个附加tr的逻辑。

在页面上添加动态字段

1 个答案: