如何用第二行扩展表格的第一行？

Posted 2023-05-09

【中文标题】如何用第二行扩展表格的第一行？

【英文标题】：How to extend the first row of a table with the second row?

【发布时间】：2012-11-23 23:32:00

【问题描述】：

我正在寻找一种使用 JS 或 jQuery 自动将表格的第一行扩展到第二行的方法。

例如，我目前有一个这种格式的表格：

<table id="tbl1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
</table>

我想把第二行的项目移到第一行，像这样：

<table id="tbl1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
  <tr></tr>
</table>

第二组tr 标记不必删除，可以保持空白，如果这样可以简化代码。

表格会有一个 id，但里面没有任何标签。

【问题讨论】：

这很简单。你都尝试了些什么？还是您希望有人会为您做这件事？

@我讨厌懒惰：我看到了你的其他 cmets。如果答案很简单，您可以直接发布它，而不是在提问之前教我一些关于努力尝试的教训。本网站旨在进行专业合作。如果你担心人们把你宝贵的时间浪费在他们本可以自己回答的问题上，那么我觉得很有趣的是你花了这么多时间故意不帮助我，甚至抽出时间来判断别人的回答并告诉我什么不是去做。您的经验绝不是不专业行为的借口。

下面我的 cmets 更适合未来的读者。关于您的问题，这表明您绝对没有付出任何努力。对于程序员来说那是不专业的。是的，我本可以发布它，但不，我不愿意在 *** 上鼓励这种活动。我无法阻止其他人回答，所以当他们这样做时，我至少可以尝试帮助未来的读者真正努力研究问题远离糟糕的解决方案。

@chiralcenter 在他的辩护中你选择了最差的答案，我可以理解这种挫败感......

@chiralcenter 您也可能想阅读以下内容：***.com/questions/how-to-ask

【参考方案1】：

var table=document.getElementById("tbl1"),
    rows=table.rows;
while (rows[1].cells[0]) rows[0].appendChild(rows[1].cells[0]);

演示：http://jsfiddle.net/7kubW/

您当然可以使用 jQuery，但是在处理表格时，纯 javascript 很容易阅读。

【讨论】：

+1 用于简单的原生解决方案。我输入了几乎相同的内容，但不想将其发布给没有尝试过任何东西的人。

@IHateLazy 我完全理解您的担忧。我忍不住有机会证明 jQuery 并不总是答案:-)

当然是值得的。 :-)

【参考方案2】：

​var $tr2td​ = $('#tbl1 tr:eq(1)').find('td').detach();

$('#tbl1 tr:eq(0)').append($tr2td);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

See Demo

【参考方案3】：

你可以这样做

​$('#tbl1 td').​​​​​​​​​​unwrap().wrapAll('<tr/>');​​​​​​​​​​​​​​​​​​

http://jsfiddle.net/DABDa/

或者如果它只有第 1 行和第 2 行

​$('#tbl1 tr').slice(0,2).find('td').unwrap().wrapAll('<tr/>');​​​​​​​​​​​​​

http://jsfiddle.net/SsTRE/

【参考方案4】：

var row2 = $("#tbl1 tr:eq(1)");
$("#tbl1 tr:first").append(row2.html()); // Add row 2 data to row 1
row2.html("");                           // empty row 2

【讨论】：

为什么要生成和解析 HTML 而不是简单地移动节点？ DOM 不是字符串。

@chiralcenter：不要使用这个解决方案。这是一种反模式。