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>地区</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>地区</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循环遍历Table的所有单元格内容
- 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
- javascript实现的使用方向键控制光标在table单元格中切换
- javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript table美化鼠标滑动单元格变色
- 利用js制作html table分页示例(js实现分页)
- Js获取table当前tr行的值的代码
- JS动态添加Table的TR，TD实现方法
- js添加table的行和列 具体实现方法
- JS获取Table中td值的方法
- Js实现动态添加删除Table行示例
- JS实现动态修改table及合并单元格的方法示例
相关文章
今天小编就为大家分享一篇快速解决bootstrap下拉菜单无法隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了H5+C3+JS实现五子棋游戏AI篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
看到一篇博客说土豆网的图片是延迟加载的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处是当页面有好几屏内容时，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷。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
最新评论