使用jQuery将行添加到页面上的特定表格

我一直在寻找各种各样的StackOverflow和Google的答案，我一直无法弄清楚这一点。使用jQuery将行添加到页面上的特定表格

我想要做的是在我的页面上添加一行到许多表格之一。现在，所有“添加行”请求都会添加到第一个表中。

这里是我的javascript：

$(document).ready(function() { 
$("a#add_row").click(function() { 
$('#ListTable1').height($('#collapse1').height() + 60) 
    $("#delTable").find('tbody') 
    .append($('<tr>') 
     .append($('<td>') 
      .append('<input type="text" name="name[]" size="5"class="input input-small" />')) 
       .append($('</td>') 
       ) 
       .append($('<td>') 
       .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />')) 
       .append($('</td>') 
       ) 
       .append($('<td style="width: 20px">') 
       .append() 
       .append($('</td>') 
       )) 
      .append($('</tr>')) 
     ); 
    }); 
});

这里是我开始的每个表：

<table class="table" id="listTable1" style="width: 280px;"> 
<thead>...the head...</thead> 
<tbody>...all sorts of rows. Added row goes at the end of the tbody...</tbody> 
<tfoot> 
    <tr> 
     <td><a id="add_row">Add Row</a></td><td></td> 
    </tr> 
</tfoot> 
</table>

，这里是按钮我使用：

<a id="add_row">Add Row</a>

我知道我必须为每个表的ID增加id，但我不知道如何处理Javascript向执行请求的表添加一行。

我该如何得到这个工作？

来源

2012-08-10 David

@大卫：尽量不要使用追加多，它不仅是大量的方法调用，但每个'$（）'问jQuery的产生一个新的对象。很多性能处罚在那里进行。做类似的事情：'var tableRow =''; $（“＃delTable”）。find（'tbody'）。append（tableRow）;' – Nope 2012-08-10 23:43:28

您可以使用closest来获得相关表格：

$("#add_row").click(function() { 
    var $theTable = $(this).closest("table"); 

    // do your thing 
});

正如你提到的，每个按钮的id shoudl是唯一的。我会建议使用一个班级，使您的选择.add_row。

来源

2012-08-10 23:29:34

很酷！我不知道.closest（）我会建议.parents（“表”） – Robodude 2012-08-10 23:34:44

@Robodude是的，父母会工作，除非有嵌套表，它会将它们全部返回。最接近的很好，因为它只返回匹配选择器的最近的祖先。 – 2012-08-10 23:35:45

保存了一天，非常感谢 – David 2012-08-10 23:49:01

将表格和按钮放在div中，然后使用parent（）;

的Javascript

$(document).ready(function() { 

    $("a#add_row").click(function() { 

    var table = $(this).parent().find('table'); 


    table.height($('#collapse1').height() + 60) 

    $("#delTable").find('tbody').append($('<tr>') 
    .append($('<td>') 
    .append('<input type="text" name="name[]" size="5"class="input input-small" />')) 
      .append($('</td>') 
      ) 
      .append($('<td>') 
      .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />')) 
      .append($('</td>') 
      ) 
      .append($('<td style="width: 20px">') 
      .append() 
      .append($('</td>') 
      )) 
     .append($('</tr>')) 
    ); 
}); 
});

HTML

<div id="container"> 

    <table class="table" id="listTable1" style="width: 280px;">...</table> 
    <a id="add_row">Add Row</a> 

</div>

来源

2012-08-10 23:32:20

使用jQuery将行添加到页面上的特定表格

回答

相关问题