jquery 合并相同内容的单元格，根据某列可以指定合并后面的任意列

最新推荐文章于 2022-10-10 14:20:07 发布

chenwengang83

最新推荐文章于 2022-10-10 14:20:07 发布

阅读量386

点赞数 2

分类专栏： js 文章标签： javascript 函数对象 jquery 合并

本文链接：https://blog.csdn.net/chenwengang83/article/details/51123784

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<table id="my-table">
            <tbody>
                <tr>
                    <td>aa</td>
                    <td>2</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
                 <tr>
                    <td>aa</td>
                    <td>1</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
                 <tr>
                    <td>bb</td>
                    <td>1</td>
                  <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
                 <tr>
                    <td>bb</td>
                    <td>2</td>
                   <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>

                 <tr>
                    <td>cc</td>
                    <td>1</td>
                	<td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>

! function($) {
    $.fn.rowspan = function(options) {
        var defaults = {}
        var options = $.extend(defaults, options);
        this.each(function() {
            var tds = $(this).find("tbody td:nth-child(" + options.td + ")");
            var current_td = tds.eq(0);
            var k = 1;
            tds.each(function(index, element) {
                if ($(this).text() == current_td.text() && index != 0) {
                    k++;
         
                    for(var i=0;i<options.flag.length;i++){
                         $(this).closest('tr').find('td').eq(options.flag[i]).remove(); 
                         current_td.closest('tr').find('td').eq(options.flag[i]).attr("rowspan", k);
                         current_td.closest('tr').find('td').eq(options.flag[i]).css("vertical-align", "middle"); 
                    }
                    $(this).remove();
                    current_td.attr("rowspan", k);
                    current_td.css("vertical-align", "middle");
                } else {
                    current_td = $(this);
                    k = 1;
                }
            });
        })
    }
}(window.jQuery);
$("#my-table").rowspan({td:1,flag:[4,2]}); // td是要合并的相同内容的列，flag是指定合并的第几列，注意从后往前写