table表格合并跨行中相同元素的列
来源:互联网 发布:galgame游戏删除数据 编辑:程序博客网 时间:2024/05/22 13:21
不说了直接贴代码原来的表格如下:
现在我要合并第二行和第三行的第二列:
可以直接下面调用js方法合并即可:
首先表格的页面
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="1" table1>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td>第一条</td><td>元素B</td><td>第三个数据</td>
</tr>
<tr>
<td>第二条</td><td>元素B</td><td>第三个数据内容</td>
</tr>
</tbody>
</table>
$(function(){
var table1 = document.getElementById("table1");//合并相同元素的列
mergeTableColumn(table1,1,table1.rows.length-1,[1]);//参数自己调试
});
function mergeTableColumn(obj, startRow, endRow, cols) {
var lineobj = new Array();
var rowIndex = -1;
var nowobj = new Array();
for (var i = startRow; i <= endRow; i++) {
for (var j = 0; j < cols.length; j++) {
nowobj[j] = obj.rows[i].cells[cols[j]].innerText;
}
var same = true;
if (rowIndex != -1) {
for (var j = 0; j <= cols.length; j++) {
if (lineobj[j] != nowobj[cols[j]]) {
same = false;
break;
}
}
} else {
same = false;
}
if (same) {
for (var j = cols.length - 1; j >= 0; j--) {
$(obj.rows[rowIndex].cells[cols[j]]).prop("rowspan", i - rowIndex + 1);
$(obj.rows[rowIndex].cells[cols[j]]).attr("mergeRow", i - rowIndex + 1);
$(obj.rows[i].cells[cols[j]]).remove();
}
} else {
rowIndex = i;
for (var j = 0; j < cols.length; j++) {
lineobj[j] = nowobj[cols[j]];
}
}
}
}
执行成功之后得到的效果如图
- table表格合并跨行中相同元素的列
- table表格合并第一列中相同的内容!
- table表格合并第一列中相同的内容!
- JS table 表格相同列合并
- js实现表格table相同列合并
- table相同的列合并
- 前台页面table表格相同数据列合并
- 合并table中值相同的列
- table 合并相同的列和行
- table列的相同单元格合并
- table表格合并第一列中相同的内容(优化+注解)
- 表格合并相同列,相同行的jquery实现
- JS前端合并TABLE相同列的单元格
- jQuery easyUI表格相同连续列合并
- GridView中2列表头合并,同列相同值的表格合并
- 根据第一列条件合并表格中后面相同的列
- jquery合并单元格(表格相邻列内容相同合并)
- 一个JAVASCRIPT实用函数,完成合并表格中列中具有相同内容的列单元格的功能
- 微信小程序一些常用代码(1)——tabar、页面跳转、分享、选项卡
- app登录时用QQ或者微信授权登录,及找回密码功能
- java二叉树的前中后序,深度优先,广度优先(层序)遍历
- 白鹭EGRET使用龙骨DRAGONBONES骨骼动画
- python DEAP学习3(遗传算法) 0-1背包问题
- table表格合并跨行中相同元素的列
- 没有找到draw9patch.bat
- android studio中kotlin语言生成API文档工具GenerateDokka
- ElasticSearch基础教程
- Servlet 详解
- 【Mapreduce】从代码上解决Output directory already exists错误,避免每次调试都要手动删除输出文件夹
- JavaWeb
- 数据结构(查找)
- Linux_MongoDB 安装笔记