<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS合并相临相同的单元格</title>
</head>
<body>
<table border='1' width='25%' align='center' id="tab">
<tr> <td>张三</td> <td>数学</td> <td>90</td> </tr>
<tr> <td>张三</td> <td>语文</td> <td>70</td> </tr>
<tr> <td>张三</td> <td>英语</td> <td>60</td> </tr>
<tr> <td>李四</td> <td>数学</td> <td>60</td> </tr>
<tr> <td>李四</td> <td>语文</td> <td>60</td> </tr>
<tr> <td>王五</td> <td>英语</td> <td>60</td> </tr>
</table>
<script language = 'javascript'>
/*
var tab=document.getElementById("tab");
var name="";
for(var i=0,j=0;i <tab.rows.length;i++,j++) {
if(name==tab.rows[i].cells[0].innerHTML) {
tab.rows[i].deleteCell(0);
} else {
name=tab.rows[i].cells[0].innerHTML;
if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
j=0;
}
}
window.onload=function(){
var tab=document.getElementById("tab");
for(i=tab.rows.length-1;i>0;i--){
for(j=tab.rows[i].cells.length-1;j>=0;j--){
if(tab.rows[i].cells[j].innerText==tab.rows[i-1].cells[j].innerText){
tab.rows[i-1].cells[j].rowSpan=tab.rows[i].cells[j].rowSpan+1;
tab.rows[i].deleteCell(j);
}
}
}
alert(tab.cols.length);
}
*/
</script>
<script>
var tab=document.getElementById("tab");
var name="";
for(var i=0,j=0;i<tab.rows.length;i++,j++){
if(name==tab.rows[i].cells[0].innerHTML) {
tab.rows[i].deleteCell(0);
}else{
name=tab.rows[i].cells[0].innerHTML;if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
j=0;
}
if(i == tab.rows.length-1){
tab.rows[i-j].cells[0].rowSpan=j+1;
}
}
</script>
</body>
</html>
分享到：
相关推荐
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
LayUiTable表单相同参数的单元格合并，可以几个列一起合并，注释相应完善。LayUiTable表单相同参数的单元格合并
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能...
动态生成表格，并自动合并相同单元格插件，可在bootstrapTable子表使用
js导出execl，自动合并单元格，自动增行，增列
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下
Table相同行的单元格自动合并，使用js来实现此效果，具体代码下，感兴趣的朋友可以参考下
使用js合并单元格，页面初始化的时候执行mergeCell.js里面的方法，合并内容相同的单元格，简单方便。
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
vue-easytable合并单元格，文档包括ftl文件及对应的js
（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。） template： Js: data(){ return{ orderdata:null,// 后端将数据查询出来后，绑定到orderdata里
仿Excel合并单元格实例点击合并表格单元格是合并表格里面相同的列，很实用的。
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
多于一列时，后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data 参数说明：_w_table_...