0

jquery のメソッドを(colspan)使用して作成された新しい行にすべての列をマージしたいと考えています。clone()もう1つ必要なのは、後に1列しかない新しい行にはcolspan、元の行のすべての値をスペースで区切る必要があることです。

私はこのようなことを試してみcloneましたが、これまでのところ、私のために働いていますcloning 

$(document).ready(function(){
 console.log($('table tbody tr').eq(0).html());
 var newtr=$('table tbody tr').eq(0).clone();
 console.log(newtr.html());
});

colspanしかし、元の行の値をカンマで区切ったすべての列をどのように作成するかはわかりません。

JSフィドルリンク

編集済み

現在のhtmlはこのようなものです

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Order</th>
            <th>Month</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>#1</td>
            <td>January</td>
        </tr>
        <tr>
            <td>Yunus</td>
            <td>#2</td>
            <td>April</td>
        </tr>
        <tr>
            <td>Nitin</td>
            <td>#3</td>
            <td>March</td>
        </tr>
    </tbody>
</table>

jqueryコードを実行した後、結果のhtmlを次のようにしたい

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Order</th>
            <th>Month</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rahul</td>
            <td>#1</td>
            <td>January</td>
        </tr>
        <tr>
            <td>Yunus</td>
            <td>#2</td>
            <td>April</td>
        </tr>
        <tr>
            <td>Nitin</td>
            <td>#3</td>
            <td>March</td>
        </tr>
        <tr>
            <td colspan="3">Rahul #1 January</td>
        </tr>
    </tbody>
</table>
4

2 に答える 2

3 
$("table tbody tr:eq(0)").each(function() {
    var $tr = $(this).clone(),
        $td = $("td", $tr);

    $td.filter(":gt(0)")
       .remove()
       .end()
       .attr("colspan", $td.length)
       .html($td.map(function() {
           return this.innerHTML;
       }).get().join(" "));

    $tr.appendTo($(this).closest("tbody"));
});

デモ: http://jsfiddle.net/uAwnQ/2/

于 2013-04-09T09:04:12.347 に答える