使用JQuery實現HTML表格的儲存格合并__HTML

使用JQuery實現HTML表格的儲存格合并：
一、JS指令碼

/**    * 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;                      }                  }              });          });      }

二、頁面HTML

<table id="shaitu" width="100%" align="center"><tr><td width="10%" align="center">    序號</td><td width="20%" align="center">    費用類別</td><td width="20%" align="center">    專業</td><td width="15%" align="center">    子類</td><td width="15%" align="center">    分項名稱</td><td width="20%" align="center">    造價（萬元）</td></tr><tr><td align="center">    </td><td align="center">    </td><td align="center">    </td><td align="center">    </td><td align="center">   </td><td align="center">    </td></tr></table>

三、頁面調用方法

<script type="text/javascript">                $(document).ready(function () {                    table_rowspan("#shaitu", 2);                    table_rowspan("#shaitu", 3);                    table_rowspan("#shaitu", 4);                });</script>