使用 jQuery 修改表格结构(合并单元格) [英] Modify table structure (merge cells) with jQuery

问题描述

我有一张桌子

<table>
<tr><td>9:00</td><td id='ts9'>task1</td></tr>
<tr><td>10:00</td><td id='ts10'></td></tr>
<tr><td>11:00</td><td id='ts11'>task2</td></tr>
<tr><td>12:00</td><td id='ts12'>task3</td></tr>
</table>

我需要将 ID 为 10 和 11 的单元格合并为一个，因为该任务需要 2 小时.我正在使用 jQuery.

and I need to merge cells with id 10 and 11 in one because that task takes 2 hours. I am using jQuery.

我想过:

$("#ts9").attr('colSpan', 2);

但这行不通.

推荐答案

如果你必须使用 jQuery，那么这有效:

If you must use jQuery, then this works:

$('#ts10')
    .text($('#ts11').text())
    .attr('rowspan','2')
    .closest('tbody')
    .find('#ts11')
    .remove();​

JS Fiddle 演示.

或者，更简洁一些:

$('#ts10')
    .text($('#ts11').remove().text())
    .attr('rowspan','2');​

JS Fiddle 演示.

还有一个稍微...有用的方法，它将相邻行的单元格与 two 的 class 合并:

And a slightly more...useful approach, which will merge cells of adjacent rows with the class of two:

$('tr td.two').each(
    function(){
        var that = $(this),
            next = that.parent().next().find('.two');
        if (next.length){
            that
                .text(next.remove().text())
                .attr('rowspan','2');
        }
    });

JS Fiddle 演示.

这篇关于使用 jQuery 修改表格结构(合并单元格)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！