jQuery實現HTML表格單元格的合並功能(合並內容相同的行或列)



/**
 * desc : 合並指定表格(表格id為table_id)指定列(列數為table_colnum)的相同文本的相鄰單元格
 * @table_id 表格id : 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ,此參數應為 #data
 * @table_colnum : 為需要合並單元格的所在列.參考jQuery中nth-child的參數.若為數字,從最左邊第一列為1開始算起;"even" 表示偶數列;"odd" 表示奇數列; "3n+1" 表示的列數為1、4、7、......
 * @table_minrow ? : 可選的,表示要合並列的行數最小的列,省略表示從第0行開始 (閉區間)
 * @table_maxrow ? : 可選的,表示要合並列的行數最大的列,省略表示最大行列數為表格最后一行 (開區間)
 */

function table_rowspan(table_id, table_colnum) {
    if (table_colnum == "even") {
        table_colnum = "2n";
    }
    else if (table_colnum == "odd") {
        table_colnum = "2n+1";
    }
    else {
        table_colnum = "" + table_colnum;
    }
    var cols = [];
    var all_row_num = $(table_id + " tr td:nth-child(1)").length;
    var all_col_num = $(table_id + " tr:nth-child(1)").children().length;
    if (table_colnum.indexOf("n") == -1) {
        cols[0] = table_colnum;
    }
    else {
        var n = 0;
        var a = table_colnum.substring(0, table_colnum.indexOf("n"));
        var b = table_colnum.substring(table_colnum.indexOf("n") + 1);
        a = a ? parseInt(a) : 1;
        b = b ? parseInt(b) : 0;
        while (a * n + b <= all_col_num) {
            cols[n] = a * n + b;
            n++;
        }
    }
    var table_minrow = arguments[2] ? arguments[2] : 0;
    var table_maxrow = arguments[3] ? arguments[3] : all_row_num + 1;
    var table_firsttd = "";
    var table_currenttd = "";
    var table_SpanNum = 0;
    for (var j = 0; j < cols.length; j++) {
        $(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
            var table_col_obj = $(this);
            if (table_col_obj.html() != " ") {
                if (i == 0) {
                    table_firsttd = $(this);
                    table_SpanNum = 1;
                }
                else {
                    table_currenttd = $(this);
                    if (table_firsttd.text() == table_currenttd.text()) {
                        table_SpanNum++;
                        table_currenttd.hide(); //remove();
                        table_firsttd.attr("rowSpan", table_SpanNum);
                    } else {
                        table_firsttd = $(this);
                        table_SpanNum = 1;
                    }
                }
            }
        });
    }
}
/**
 * desc : 合並指定表格(表格id為table_id)指定行(行數為table_rownum)的相同文本的相鄰單元格
 * @table_id 表格id : 為需要進行合並單元格的表格的id。如在HTMl中指定表格 id="data" ,此參數應為 #data
 * @table_rownum : 為需要合並單元格的所在行.參考jQuery中nth-child的參數.若為數字,從最左邊第一列為1開始算起;"even" 表示偶數行;"odd" 表示奇數行; "3n+1" 表示的行數為1、4、7、......
 * @table_mincolnum ? : 可選的,表示要合並行中的最小列,省略表示從第0列開始(閉區間)
 * @table_maxcolnum ? : 可選的,表示要合並行中的最大列,省略表示表格的最大列數(開區間)
 */
function table_colspan(table_id, table_rownum) {
    var table_mincolnum = arguments[2] ? arguments[2] : 0;
    var table_maxcolnum;
    var table_firsttd = "";
    var table_currenttd = "";
    var table_SpanNum = 0;
    $(table_id + " tr:nth-child(" + table_rownum + ")").each(function (i) {
        table_row_obj = $(this).children();
        table_maxcolnum = arguments[3] ? arguments[3] : table_row_obj.length;
        table_row_obj.slice(table_mincolnum, table_maxcolnum).each(function (i) {
            if (i == 0) {
                table_firsttd = $(this);
                table_SpanNum = 1;
            } else if ((table_maxcolnum > 0) && (i > table_maxcolnum)) {
                return "";
            } else {
                table_currenttd = $(this);
                if (table_firsttd.text() == table_currenttd.text()) {
                    table_SpanNum++;
                    if (table_currenttd.is(":visible")) {
                        table_firsttd.width(parseInt(table_firsttd.width()) + parseInt(table_currenttd.width()));
                    }
                    table_currenttd.hide(); //remove();
                    table_firsttd.attr("colSpan", table_SpanNum);
                } else {
                    table_firsttd = $(this);
                    table_SpanNum = 1;
                }
            }
        });
    });
}
//調用  : 代表把id為recordTb的表格的第一列,相同內容合並
table_rowspan("#recordTb",1);




本章引自:http://www.jb51.net/article/81977.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM