网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 jQuery实现HTML表格单元格的合并功能
范文
    本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下：
    运行效果截图如下：
    名单
    具体代码如下：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    /**
    * 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);
    //alert("a="+a+"b="+(b==true));
    a = a ? parseInt(a) : 1;
    b = b ? parseInt(b) : 0;
    //alert(b);
    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) {
    //if(table_maxcolnum == void 0){table_maxcolnum=0;}
    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;
    }
    }
    });
    });
    }
    </script>
    </head>
    <body>
    <table width="400" id="table1">
    <tr>
    <td>
    a
    </td>
    <td>
    for
    </td>
    <td>
    for
    </td>
    <td>
    100
    </td>
    <td>
    200
    </td>
    <td>
    200
    </td>
    </tr>
    <tr>
    <td>
    a
    </td>
    <td>
    for
    </td>
    <td>
    for
    </td>
    <td>
    150
    </td>
    <td>
    230
    </td>
    <td>
    200
    </td>
    </tr>
    <tr>
    <td>
    dd
    </td>
    <td>
    if
    </td>
    <td>
    for
    </td>
    <td>
    100
    </td>
    <td>
    200
    </td>
    <td>
    200
    </td>
    </tr>
    <tr>
    <td>
    aa
    </td>
    <td>
    if
    </td>
    <td>
    for
    </td>
    <td>
    300
    </td>
    <td>
    240
    </td>
    <td>
    200
    </td>
    </tr>
    <tr>
    <td>
    e
    </td>
    <td>
    if
    </td>
    <td>
    for
    </td>
    <td>
    320
    </td>
    <td>
    230
    </td>
    <td>
    200
    </td>
    </tr>
    </table>
    <input type="button" value="合并表格2" onClick="table_colspan('#table1',1)"> 
    <input type="button" value="合并表格1" onClick="table_rowspan('#table1',1)"> 
    </body>
    </html>
    希望本文所述对大家jQuery程序设计有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 22:59:18