手动阀

Good Luck To You!

合并table相同单元格的jquery插件分享(很精简)

合并表格中相同单元格的 jQuery 插件可以帮助简化代码,并提高开发效率,以下是一个精简版的 jQuery 插件示例,用于合并表格中相同的单元格:

(function($) {
    $.fn.mergeCells = function(options) {
        var settings = $.extend({
            colIndex: 0, // 要合并的列索引
            compareFn: null // 自定义比较函数
        }, options);
        return this.each(function() {
            var table = $(this);
            var rows = table.find('tr');
            var lastValue = null;
            var rowspanCount = 1;
            rows.each(function(index) {
                var cell = $(this).find('td').eq(settings.colIndex);
                var currentValue = cell.text();
                if (index === 0) {
                    lastValue = currentValue;
                    return;
                }
                if (settings.compareFn) {
                    if (settings.compareFn(currentValue, lastValue)) {
                        rowspanCount++;
                        cell.remove();
                    } else {
                        $(rows[index rowspanCount]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount);
                        lastValue = currentValue;
                        rowspanCount = 1;
                    }
                } else {
                    if (currentValue === lastValue) {
                        rowspanCount++;
                        cell.remove();
                    } else {
                        $(rows[index rowspanCount]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount);
                        lastValue = currentValue;
                        rowspanCount = 1;
                    }
                }
            });
            // 处理最后一行
            if (rowspanCount > 1) {
                $(rows[rows.length 1]).find('td').eq(settings.colIndex).attr('rowspan', rowspanCount);
            }
        });
    };
}(jQuery));

使用方法

假设你有一个 HTML 表格如下:

<table id="myTable">
    <tr>
        <td>A</td>
        <td>1</td>
    </tr>
    <tr>
        <td>A</td>
        <td>2</td>
    </tr>
    <tr>
        <td>B</td>
        <td>3</td>
    </tr>
    <tr>
        <td>B</td>
        <td>4</td>
    </tr>
</table>

你可以使用这个插件来合并第一列中的相同单元格:

$('#myTable').mergeCells({ colIndex: 0 });

自定义比较函数

如果你需要自定义比较逻辑,可以传递一个compareFn 函数,忽略大小写进行比较:

$('#myTable').mergeCells({
    colIndex: 0,
    compareFn: function(a, b) {
        return a.toLowerCase() === b.toLowerCase();
    }
});

这个插件非常简洁,但功能足够强大,可以根据需要进行扩展和定制。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright Your WebSite.Some Rights Reserved.