JQuery - 从 PHP 将多列附加到表中答案

【问题标题】：JQuery - append multiple columns to a table from PHPJQuery - 从 PHP 将多列附加到表中
【发布时间】：2015-06-07 19:14:20
【问题描述】：

我看过几个问题，比如这个：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 行：（请记住，cmets 是为了向您展示格式。我实际上并没有回显那些 cmets）

<!--<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

感谢您的帮助。

【问题讨论】：

试试 $('#myTable').find('tbody:last').append('')
您在当前表中有 tbody？我在您的 php 生成的表格内容中看不到它
是的，我的原始表中有 tbody，但 php 生成的表中没有。我应该将添加到来自 php 的表中吗？
@daremachine 我尝试将添加到传入的 html 和上面的建议中。它导致表格低于原始表格。
您已经打印了包含当前数据的表格，并且您在哪里获取了您想要添加的新数据？点击或在哪里有任何 js 事件？

// 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); });

【解决方案2】：

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

我不知道你对这一切有多少控制权，但我过去尝试做的是将我的数据保留为模拟 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 中某个新的隐藏表中，然后尝试解析它并逐块移动 tds。这就是我能想到的纯 jQuery 解决方案。

【讨论】：