JS 實現(xiàn)Table相同行的單元格自動合并示例代碼
更新時間：2013年08月27日 15:02:52 作者：
Table相同行的單元格自動合并，使用js來實現(xiàn)此效果，具體代碼下，感興趣的朋友可以參考下
代碼如下，可直接運行：
<!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>
復(fù)制代碼 代碼如下:
<!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所有單元格內(nèi)容的方法
- JS使用for循環(huán)遍歷Table的所有單元格內(nèi)容
- 用js實現(xiàn)table單元格高寬調(diào)整,兼容合并單元格(兼容IE6、7、8、FF)實例
- javascript實現(xiàn)的使用方向鍵控制光標(biāo)在table單元格中切換
- javascript 移動鼠標(biāo)得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript table美化鼠標(biāo)滑動單元格變色
- 利用js制作html table分頁示例(js實現(xiàn)分頁)
- Js獲取table當(dāng)前tr行的值的代碼
- JS動態(tài)添加Table的TR，TD實現(xiàn)方法
- js添加table的行和列 具體實現(xiàn)方法
- JS獲取Table中td值的方法
- Js實現(xiàn)動態(tài)添加刪除Table行示例
- JS實現(xiàn)動態(tài)修改table及合并單元格的方法示例
相關(guān)文章
Bootstrap中定制LESS-顏色及導(dǎo)航條(推薦)
這篇文章主要介紹了Bootstrap中定制LESS-顏色及導(dǎo)航條的相關(guān)資料，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
JavaScript中數(shù)組的各種操作的總結(jié)(必看篇)
下面小編就為大家?guī)硪黄狫avaScript中數(shù)組的各種操作的總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本篇文章給大家詳細分析了javascript原型及原型鏈的相關(guān)知識點以及用法分享，有興趣的朋友參考下。2018-03-03
如何設(shè)置一定時間內(nèi)只能發(fā)送一次請求
這篇文章主要介紹了如何設(shè)置一定時間內(nèi)只能發(fā)送一次請求,需要的朋友可以參考下2014-02-02
extjs 04_grid 單擊事件新發(fā)現(xiàn)
EXTJS GRID 中單擊行和單元格獲得行或者單元格的內(nèi)容(數(shù)據(jù)),本文將整理此功能的應(yīng)用，需要了解的朋友可以參考下2012-11-11
JavaScript實現(xiàn)文本轉(zhuǎn)語音功能的完整步驟
這篇文章主要介紹了如何使用JavaScript和WebSpeechAPI快速實現(xiàn)一個簡單的文本轉(zhuǎn)語音Web應(yīng)用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章給大家介紹了greenbrower用到的function.js代碼集合，感興趣的朋友一起看看吧2007-12-12
JavaScript 總結(jié)幾個提高性能知識點(推薦)
下面小編就為大家?guī)硪黄狫avaScript 總結(jié)幾個提高性能知識點(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文通過實例代碼給大家介紹了JavaScript 實現(xiàn)拖放功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09