当数据来自HTML元素时，如何使用jQuery向表中添加行？

I have the following HTML:

我有以下HTML:

<table id="tableName">
  <tr>
    <td>One</td>
  </tr>
</table>

<div id="divTableRow">
  <tr>
    <td>Two</td>
  </tr>
</div>

I have the following code:

我有以下代码:

$('#tableName').append($('#divTableRow').html());

I have tried many ways such as targeting the tbody that jQuery creates however my TR and TD tags are never brought across.

我已经尝试了很多方法,例如针对jQuery创建的tbody但是我的TR和TD标签永远不会被带到。

Is there a way to encapsulate the html so it is inserted exactly as it is? I can not put everything in quotes as it contains a lot of inputs etc

有没有办法封装html所以它被完全插入原样?我不能把所有内容都放在引号中,因为它包含很多输入等

2 个解决方案

#1

That is completely invalid html so do not expect it to ever work. Why would you have table rows in a div?

这是完全无效的HTML,所以不要指望它会工作。为什么在div中有表行?

This would work

这会奏效

http://jsfiddle.net/mplungjan/ZHuuY/

$("#tableRow tr").each(function() {
    $('#tableName').append($(this).clone());
});

or this if you want to move rather than copy

或者如果你想移动而不是复制

$("#tableRow tr").each(function() {
  $('#tableName').append($(this));
});                             

<table id="tableName" style="border:1px solid green">
  <tr>
    <td>One</td>
  </tr>
</table>

<table id="tableRow" style="display:none">
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
</table>

generated html:

<table style="border:1px solid green" id="tableName">
  <tbody>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
  </tbody>
</table>

#2

Restructure it to something like:

将其重组为:

<table id="tableName">
  <tr>
    <td>One</td>
  </tr>
</table>

<div id="divTableRow">
   <!-- any html here, the below is just an example !-->
   <a href="/home">Home</a>
 </div>

Then you can simply do:

然后你可以简单地做:

$('#tableName > tbody').append($('<tr>').html($('#divTableRow')));

Also your comment:

还有你的评论:

"I have tried many ways such as targeting the tbody that jQuery creates"

“我尝试了许多方法,例如定位jQuery创建的tbody”

This is incorrect, jQuery doesn't create a tbody, the browser does. Tables are semantically invalid without it, although of course it works without because of the forgiving nature of browsers. It's important to factor it into the selector otherwise it'll add the <tr> outside the tbody, which is wrong.

这是不正确的,jQuery不会创建tbody,浏览器会这样做。没有它,表在语义上是无效的,虽然它当然没有因为浏览器的宽容性而有效。将它计入选择器是很重要的,否则它会在tbody之外添加,这是错误的。

#1