Question

我已经看过几个问题，例如：Add table row in jQuery和这个问题：jQuery add HTML table column但我的情况有点不同。

我有一个现有的表，我想在最后添加多个列。我试过了：

$('#myTable tr:last').after
$('#myTable > tbody:last').append
$("#myTable > tbody").append
$('#myTable > tbody:first').append
$('#myTable').find('tbody:last').append

我认为这是因为我带来的是PHP创建的单独行。

我做了一些计算并回显了这样的html行:(请记住，这些注释是为了显示格式。我实际上并没有回复那些评论）

<!--<tr><td>11133150.5</td><td>-6027209.5</td><td>31</td></tr><tr><td>11133678.8</td><td>-6027083.6</td><td>31</td></tr><tr><td>11133027.7</td><td>-6027256.7</td><td>31</td></tr><tr><td>11133136.9</td><td>-6027178.9</td><td>31</td></tr><tr><td>11133175.1</td><td>-6027538.3</td><td>31</td></tr><tr><td>11132970.5</td><td>-6027393.1</td><td>31</td></tr><tr><td>11133117.4</td><td>-6026786.8</td><td>31</td></tr><tr><td>11133507.2</td><td>-6027230.5</td><td>31</td></tr><tr><td>11133733.8</td><td>-6027372.2</td><td>31</td></tr><tr><td>11133444.4</td><td>-6026785.8</td><td>31</td></tr><tr><td>11133953.7</td><td>-6027232.9</td><td>31</td></tr><tr><td>11133073.2</td><td>-6027232.7</td><td>31</td></tr><tr><td>11134175.4</td><td>-6027043.2</td><td>31</td></tr><tr><td>11133973.5</td><td>-6026862.6</td><td>31</td></tr><tr><td>11133548.3</td><td>-6026404.2</td><td>31</td></tr><tr><td>11133327.9</td><td>-6026073.9</td><td>31</td></tr><tr><td>11133105.4</td><td>-6026271.5</td><td>31</td></tr><tr><td>11133154.9</td><td>-6027287.6</td><td>31</td></tr><tr><td>11133179</td><td>-6027305.4</td><td>31</td></tr><tr><td>11133223.6</td><td>-6027247.9</td><td>31</td></tr><tr><td>11133128.7</td><td>-6027094.8</td><td>31</td></tr><tr><td>11133010.9</td><td>-6027277.4</td><td>31</td></tr><tr><td>11133241.8</td><td>-6027367.1</td><td>31</td></tr><tr><td>11133361.6</td><td>-6027437.1</td><td>31</td></tr><tr><td>11133298.1</td><td>-6027167.3</td><td>31</td></tr><tr><td>0</td><td>166021.4</td><td>31</td></tr>--!>

当我尝试将它们添加到现有的表（长度相同）时，我将它放在表的末尾（在它下面）或者我已将它嵌套在里面，但我想要的是它要追加它到表的末尾作为新列。

我不确定这是否是最好的方法，或者我还缺少其他的东西。

更新为了帮助我解决这个问题，我做了一个小提琴：Fiddle

感谢您的帮助。

Answer 1

如果您要添加列，则需要将新的td附加到tr。你不能拥有那些新的tr标签。您必须分别将每个“行”（tds集）的新数据放入，并将每组tds附加到正确的tr。你的问题是你的所有人都在自动创建新行。

我不知道你对这一切有多少控制权，但我过去试图做的是将我的数据保存为模仿html表的相同行/列格式的实际数据，这意味着json看起来像这样：

[
   [ 1, 2, 3, 4, 5, 6 ],
   [ 1, 2, 3, 4, 5, 6 ],
   [ 1, 2, 3, 4, 5, 6 ]
]

然后编写一个jquery脚本，只要你告诉它就可以将它转换成一个html表（基本上是使用嵌套的“for”循环）。然后，您可以将数据输入，并根据需要进行更新。

但是对于你如何做到这一点，它是非常艰难的。您可以使用新的html，tr标签和所有内容，将它放在DOM中某个新的隐藏表中，然后尝试解析它并将块移动到块中。这就是我能想到的纯粹jQuery解决方案。

Answer 2

您的代码无法正常工作，因为您将整个表插入到第一个表中的第一个出现的<tr>元素中。为了正确遍历所有行，您必须首先处理传入的HTML。这是策略：

将table2转换为jQuery对象。但是，请记住，自jQuery .find() cannot search for sibling elements at the top level（在您的情况下为<tr>）以来，我们必须先将它包起来。
只需在其周围添加table2即可换行原始的<table></table> HTML字符串。由于上述相同的原因，.wrap()在这里不起作用，因此我们进行简单的字符串连接。
现在我们准备好使用您的jQuery对象了。我们使用.find()删除所有<tr>，遍历每个{-1} - 在每个表行中找到单元格，然后按索引将它们附加到现有表格行。由于您的第一行只是一个标题，我们将索引偏移1（使用i+1）。

不用多说，这里是代码：

// Wrap your second table with <table>, only because jQuery cannot find sibling elements (i.e. at the same level)
var $t2 = $('<table>'+table2+'</table>');
$t2.find('tr').each(function(i) {
    var $row = $('#test table tbody tr').eq(i+1);
    $(this).find('td').appendTo($row);
});

工作小提琴：http://jsfiddle.net/teddyrised/wkezt8o6/1/

JQuery - 从PHP向表附加多个列

2 个答案: