colspane 克隆行的所有列

Posted 2023-05-08

【中文标题】colspane 克隆行的所有列

【英文标题】：colspane all columns of clone row

【发布时间】：2013-03-31 14:38:55

【问题描述】：

我想将所有列 (colspan) 合并到一个使用 jquery 的 clone() 方法创建的新行中。还有一件事我希望在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 FIDDLE LINK

已编辑

当前的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>

【参考方案1】：

$("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/

【讨论】：

@Karna 谢谢。这就是我理解 OP 想要得到什么的方式。

问题已编辑以显示我到底想要什么，我使用第一行作为克隆示例，但它可以更改。

@rahularyansharma 现在怎么样？如果您需要添加所有行，请从选择器中删除 :eq(0)。

【参考方案2】：

我应该这样做：

var $tr = $("table tbody tr:first").clone(),
$td = $("td", $tr);

var content = '';
$td.each(function()content+=$(this).html()+' ';);
content = '<td colspan="'+$td.length+'">'+content+'</td>';
$tr.html(content);

$tr.appendTo("table tbody");

如果需要另一行，您可以将 :first 选择器更改为 eq()。 如果要影响多行，则可以使用 .each()

演示 http://jsfiddle.net/f932M/1/