-1

JSまたはjQueryを使用して、テーブルの最初の行を2番目の行で自動的に拡張する方法を探しています。

たとえば、現在、次の形式のテーブルがあります。

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

そして、次のように、2行目のアイテムを1行目に移動したいと思います。

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

タグの2番目のセットはtr削除する必要はなく、コードを簡略化する場合は空白のままにすることができます。

テーブルにはIDがありますが、テーブル内のタグはありません。

4

4 に答える 4

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が読みやすくなります。

于 2012-12-06T00:53:20.600 に答える
0 
​var $tr2td​ = $('#tbl1 tr:eq(1)').find('td').detach();

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

デモを見る

于 2012-12-06T00:46:42.553 に答える
0

あなたはこのようにそれを行うことができます

​$('#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/

于 2012-12-07T19:55:34.067 に答える
-1 
var row2 = $("#tbl1 tr:eq(1)");
$("#tbl1 tr:first").append(row2.html()); // Add row 2 data to row 1
row2.html("");                           // empty row 2
于 2012-12-06T00:46:38.203 に答える