Question

我有一个用ajax调用数据填充的表。是否可以将新数据附加到与已存在的数据相同的表行中？下面的示例首先将数据附加到新行。这是fiddle.

<a href="javascript:void(0);">Add data</a>
<table id="myTable">
  <tbody>
    <tr>
      <td>Info</td>
    </tr>
  </tbody>
</table>

Jquery的

$(document).ready(function() {
    $('a').click(function() {
       $('#myTable tbody').append('<td>info,</td>');
    });
});

Answer 1

试试这个：

$(document).ready(function() {
 $('a').click(function() {
   $('#myTable tbody tr:first').append('<td>info,</td>');
 });
});

Answer 2

您可以尝试这样做，它会向您的表中添加新的td。

$(document).ready(function() {
    $('a').click(function() {
       $('#myTable > tbody > tr').append('<td>info,</td>');
    });
});

Answer 3

是的，你可以，但只有在ajax完成并且html在页面上之后

$(document).ready(function() {


         $('a').click(function() {
               if($('#myTable > tbody > tr.dynamically-added-by-ajax').length) {//test if the html from the ajax is present on the page
                  $('#myTable > tbody > tr.dynamically-added-by-ajax').append('<td>additional info ,</td>');
               }
         });

如果通过ajax添加了被点击的元素，则需要为其委派click事件

$('#myTable').on('click','a',function() {
   //the append function 
}

如何使用Jquery将数据附加到同一行？

3 个答案: