Question

我想知道为什么如果我使用Jquery向表添加新行，如果我检查页面的源代码，则新添加的行不会添加到表中。我想要一种方法将新行添加到表中。这是jquery代码：

$("#button").click(function(){
            $("table >tbody").append($('<tr>')).append($('<td>')).append("new row");
        });

和表：

<table>
    <tbody>
    </tbody>
</table>

Answer 1

使用此：

<table id="yourtableid"><tbody></tbody><table>

$("#button").click(function(){
   $("#yourtableid tbody").append($('<tr>')).append($('<td>')).text("new row");
});

TEST HERE

Answer 2

我建议：

$("#button").click(function() {
  // create a <tr> element:
  $('<tr>', {
    // set its html:
    'html' : '<td>New row</td>'
  // append the <tr> to the <tbody>:
  }).appendTo('table > tbody');
});

$("#button").click(function() {
  $('<tr>', {
    'html' : '<td>New row</td>'
  }).appendTo('table > tbody');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">button</button>
<table>
  <tbody>
  </tbody>
</table>

原始代码的原因：

$("#button").click(function() {
  $("table > tbody").append($('<tr>')).append($('<td>')).append("new row");
});

不起作用是因为append()返回附加了新内容的元素（在本例中为<tbody>，因此所有元素和textContent都附加到该元素（创建）无效的HTML）。

$("#button").click(function() {
  $("table > tbody").append($('<tr>')).append($('<td>')).append("new row");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">button</button>
<table>
  <tbody>
  </tbody>
</table>

参考文献：

动态生成的行未添加到表html中

2 个答案: