时间戳

首页 > 解决方案 > 如何使用jquery动态添加行？

javascript - 如何使用jquery动态添加行？

问题描述

我有一个包含一行和两列的表格（一个文本框和一个按钮）：

$(function() {
  var i = 1;
  
  $('#add').click(function() {
    i++;
    $('#dyn').append('<tr id="row' + i + '"><td><input type="text" name="name[]"></td><td><button type="button" id="' + i + '" class="btn btn-danger remove">x</button></td></tr>');
  });
  
  $(document).on('click', '.remove', function() {
    var id = $(this).attr("id");
    $('#row' + i + '').remove();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <table id="dyn">
    <tr>
      <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
      <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
  </table>
  <button type="button" id="submit"></button>

我想要做的是向表中添加新行并删除它们。问题是当我尝试删除这些行之一时，我只能删除一个其他行。我在这里做错了什么？

标签： javascriptjquery

解决方案

我想你的意思是 ID 在这里而不是我

$(document).on('click','.remove',function(){
    var id=$(this).attr("id");
    $('#row'+id+'').remove();
})

推荐阅读