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

Question

我正在寻找一种使用 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，但其中没有任何标签。

Answer 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 很容易阅读。

Answer 2

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

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

看演示

Answer 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/

Answer 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