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

See Demo

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

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

4 个答案:

See Demo