Question

我有一个模板，其中包含两个添加按钮和两个表。当用户单击添加按钮行时，应附加到相应的表。例如：

<div class="reports">
   <div class="panel">
    <table class="A">
     <thead>
      <td>A</td>
      <td>B</td>
      <td>C</td>
     </thead>
     <tbody></tbody>
    </table>
   </div>
   <button class="add" type="button">Add</button>
  </div>

使用相同的代码创建表格并添加具有不同ID的报告.js是

$('.reports').on('click','.add',function(){
      //do something
});

我希望将行附加到相应的表中。

Answer 1

使用append()

$('.reports').on('click','.add',function(){
      $(this).closest('.reports').find('table').append('<tr/>');
});

Answer 2

香草Js方法：

var button = document.getElementsByClassName('add');
var table = document.getElementsByClassName('A');

button.addEventListener('click', function(){
  var tr = document.createElement('tr');
  table.appendChild(tr);
});

Answer 3

假设您在父div上有不同的ID

$('.reports').on('click','.add',function(){
    $(this)  //button that was clicked
   .parent() //div around the button
     .siblings(".A")  //sibling element that has the table
       .find("table tbody")  //the table
         .append(tableRow);

单击按钮时如何添加表行：jquery

3 个答案: