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

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 :Fiddle

感谢您的帮助。

Answer 1

您的代码无法按预期工作，因为您将整个表插入到第一个出现的 <tr> 中。元素到您的第一个表中。为了正确循环所有行，您必须首先处理传入的 HTML。策略如下:

1. 转换您的table2到一个 jQuery 对象中。但是，请记住，自从 jQuery .find() cannot search for sibling elements at the top level (在你的例子中是 <tr>)，我们必须先将它包装起来。
2. 包装您的原件 table2 HTML 字符串只需添加 <table></table>周围。 .wrap()由于与上述相同的原因，这里不起作用，因此我们进行了简单的字符串连接。
3. 现在我们已经准备好您的 jQuery 对象了，可以使用了。我们使用.find()捞出所有<tr> ，循环遍历每个表格 — 找到每个表格行中的单元格，然后按索引将它们附加到现有表格行。由于您的第一行只是一个标题，因此我们将索引偏移 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);
});

工作 fiddle :http://jsfiddle.net/teddyrised/wkezt8o6/1/