JS 實現Table相同行的單元格自動合并示例代碼
更新時間：2013年08月27日 15:02:52 作者：
Table相同行的單元格自動合并，使用js來實現此效果，具體代碼下，感興趣的朋友可以參考下
代碼如下，可直接運行：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function autoRowSpan(tb,row,col)
{
var lastValue="";
var value="";
var pos=1;
for(var i=row;i<tb.rows.length;i++){
value = tb.rows[i].cells[col].innerText;
if(lastValue == value){
tb.rows[i].deleteCell(col);
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;
pos++;
}else{
lastValue = value;
pos=1;
}
}
}
</SCRIPT>
<BODY onload="autoRowSpan(tb,0,0)">
<TABLE id="tb" border="1">
<THEAD>
<TR >
<TD>國家</TD>
<TD>地區(qū)</TD>
</TR>
</THEAD>
<TR>
<TD>中國</TD>
<TD>河南</TD>
</TR>
<TR>
<TD>中國</TD>
<TD>四川</TD>
</TR>
<TR>
<TD>中國</TD>
<TD>北京</TD>
</TR>
<TR>
<TD>美國</TD>
<TD>紐約</TD>
</TR>
<TR>
<TD>美國</TD>
<TD>洛杉磯</TD>
</TR>
<TR>
<TD>英國</TD>
<TD>倫敦</TD>
</TR>
</TABLE>
</BODY>
</HTML>
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function autoRowSpan(tb,row,col)
{
var lastValue="";
var value="";
var pos=1;
for(var i=row;i<tb.rows.length;i++){
value = tb.rows[i].cells[col].innerText;
if(lastValue == value){
tb.rows[i].deleteCell(col);
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;
pos++;
}else{
lastValue = value;
pos=1;
}
}
}
</SCRIPT>
<BODY onload="autoRowSpan(tb,0,0)">
<TABLE id="tb" border="1">
<THEAD>
<TR >
<TD>國家</TD>
<TD>地區(qū)</TD>
</TR>
</THEAD>
<TR>
<TD>中國</TD>
<TD>河南</TD>
</TR>
<TR>
<TD>中國</TD>
<TD>四川</TD>
</TR>
<TR>
<TD>中國</TD>
<TD>北京</TD>
</TR>
<TR>
<TD>美國</TD>
<TD>紐約</TD>
</TR>
<TR>
<TD>美國</TD>
<TD>洛杉磯</TD>
</TR>
<TR>
<TD>英國</TD>
<TD>倫敦</TD>
</TR>
</TABLE>
</BODY>
</HTML>
您可能感興趣的文章:
- JS與jQuery遍歷Table所有單元格內容的方法
- JS使用for循環(huán)遍歷Table的所有單元格內容
- 用js實現table單元格高寬調整,兼容合并單元格(兼容IE6、7、8、FF)實例
- javascript實現的使用方向鍵控制光標在table單元格中切換
- javascript 移動鼠標得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript table美化鼠標滑動單元格變色
- 利用js制作html table分頁示例(js實現分頁)
- Js獲取table當前tr行的值的代碼
- JS動態(tài)添加Table的TR，TD實現方法
- js添加table的行和列 具體實現方法
- JS獲取Table中td值的方法
- Js實現動態(tài)添加刪除Table行示例
- JS實現動態(tài)修改table及合并單元格的方法示例
相關文章
今天小編就為大家分享一篇快速解決bootstrap下拉菜單無法隱藏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了H5+C3+JS實現五子棋游戲AI篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
看到一篇博客說土豆網的圖片是延遲加載的。原理是這樣：頁面可見區(qū)域以下的圖片先不加載，等到用戶向下滾動到圖片位置時，再進行加載。這樣做的好處是當頁面有好幾屏內容時，這樣我們就可以只加載用戶需要看的圖片，減少服務器向用戶瀏覽器發(fā)送圖片文件所產生的負荷。2015-08-08
菜單制作學習一個小東西...2006-09-09
這篇文章主要為大家詳細介紹了js代碼實現多人聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
今天小編就為大家分享一篇使用bootstrap實現下拉框搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關于利用JS如何獲取form表單數據的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
在本篇文章里小編給大家整理的是一篇關于js中hasOwnProperty的屬性及實例用法詳解內容，有需要的朋友們可以跟著學習下。2021-11-11
這篇文章主要為大家詳細介紹了JavaScript代碼實現簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了基于javascript簡單實現對身份證校驗的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02