DIV CSS 佈局教程網

ONE

已經生成的數據表格大致內容如下：

地區 地區 商品代碼 商品名稱 數量 有效期至 距效期（月） 產品批號 規格 單位 條形碼 廣東 深圳 00028 紅花油 廣東 深圳 00028 紅花油 廣東 深圳 00028 紅花油 廣東 廣州 00027 白花油 廣東 廣州 00028 紅花油 廣東 深圳 00028 紅花油 廣東 深圳 00028 紅花油 廣東 深圳 00028 紅花油 廣東 深圳 00028 紅花油

需要將前四列具有相同文本的相鄰單元格進行自動合並，合並後如下：

地區 地區 商品代碼 商品名稱 數量 有效期至 距效期（月） 產品批號 規格 單位 條形碼 廣東 深圳 00028 紅花油 廣州 00027 白花油 00028 紅花油 深圳

1、在html的head中引入jQuery

2、添加合並單元格的函數
代碼如下:
//函數說明：合並指定表格（表格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" 表示的行數為1、4、7、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;
}
}
});
});
}

3、在html的head中調用合並函數合並單元格
代碼如下:
<script type="text/javascript"><!--
$(document).ready(function(){
_w_table_rowspan("#spdata",4);
_w_table_rowspan("#spdata",3);
_w_table_rowspan("#spdata",2);
_w_table_rowspan("#spdata",1);
});
// -->
</script>