js合併單元格（相同）

時間 2019-11-25
原文原文鏈接
<!DOCTYPE HTML>
<html>

<head>
    <title>Example</title>
    <meta charset="utf-8" />
    <style></style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <table id="process" cellpadding="2" cellspacing="0" border="1">
        <thead>
            <tr>
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>22222</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>33333</td>
                <td>國家</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>55555</td>
                <td>國家</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>77777</td>
                <td>88888</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>uuuuu</td>
                <td>hhhhh</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>ggggg</td>
                <td>ccccc</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ttttt</td>
                <td>eeeee</td>
                <td>GuangZhouCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ppppp</td>
                <td>qqqqq</td>
                <td>GuangZhouCity</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        //函數說明：合併指定表格（表格id爲_w_table_id）指定列（列數爲_w_table_colnum）的相同文本的相鄰單元格
        //參數說明：_w_table_id 爲須要進行合併單元格的表格的id。如在HTMl中指定表格 id="data" ，此參數應爲 #data 
        //參數說明：_w_table_colnum 爲須要合併單元格的所在列。爲數字，從最左邊第一列爲1開始算起。
        function _w_table_rowspan(_w_table_id, _w_table_colnum) {
            _w_table_firsttd = "";
            _w_table_currenttd = "";
            _w_table_SpanNum = 0;
            _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
            _w_table_Obj.each(function(i) {
                if (i == 0) {
                    _w_table_firsttd = $(this);
                    _w_table_SpanNum = 1;
                } else {
                    _w_table_currenttd = $(this);
                    if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
                        _w_table_SpanNum++;
                        _w_table_currenttd.hide(); //remove();
                        _w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
                    } else {
                        _w_table_firsttd = $(this);
                        _w_table_SpanNum = 1;
                    }
                }
            });
        }
        //函數說明：合併指定表格（表格id爲_w_table_id）指定行（行數爲_w_table_rownum）的相同文本的相鄰單元格
        //參數說明：_w_table_id 爲須要進行合併單元格的表格id。如在HTMl中指定表格 id="data" ，此參數應爲 #data 
        //參數說明：_w_table_rownum 爲須要合併單元格的所在行。其參數形式請參考jQuery中nth-child的參數。
        //          若是爲數字，則從最左邊第一行爲1開始算起。
        //          "even" 表示偶數行
        //          "odd" 表示奇數行
        //          "3n+1" 表示的行數爲一、四、七、10.......
        //參數說明：_w_table_maxcolnum 爲指定行中單元格對應的最大列數，列數大於這個數值的單元格將不進行比較合併。
        //          此參數能夠爲空，爲空則指定行的全部單元格要進行比較合併。
        function _w_table_colspan(_w_table_id, _w_table_rownum, _w_table_maxcolnum) {
            if (_w_table_maxcolnum == void 0) {
                _w_table_maxcolnum = 0;
            }
            _w_table_firsttd = "";
            _w_table_currenttd = "";
            _w_table_SpanNum = 0;
            $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i) {
                _w_table_Obj = $(this).children();
                _w_table_Obj.each(function(i) {
                    if (i == 0) {
                        _w_table_firsttd = $(this);
                        _w_table_SpanNum = 1;
                    } else if ((_w_table_maxcolnum > 0) && (i > _w_table_maxcolnum)) {
                        return "";
                    } else {
                        _w_table_currenttd = $(this);
                        if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
                            _w_table_SpanNum++;
                            _w_table_currenttd.hide(); //remove();
                            _w_table_firsttd.attr("colSpan", _w_table_SpanNum);
                        } else {
                            _w_table_firsttd = $(this);
                            _w_table_SpanNum = 1;
                        }
                    }
                });
            });
        }
        $(document).ready(function() {
            _w_table_rowspan("#process", 4);
            _w_table_rowspan("#process", 3);
            _w_table_rowspan("#process", 2);
            _w_table_rowspan("#process", 1);
        });

    </script>
</body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。