table表格合并跨行中相同元素的列
2017-05-27 14:48
381 查看
不说了直接贴代码原来的表格如下:
现在我要合并第二行和第三行的第二列:
可以直接下面调用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]];
}
}
}
}
执行成功之后得到的效果如图
现在我要合并第二行和第三行的第二列:
可以直接下面调用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表格合并第一列中相同的内容!
- js实现表格table相同列合并
- table表格合并第一列中相同的内容!
- 前台页面table表格相同数据列合并
- iText7根据html表格(table)代码生成表格、解决跨行跨列问题
- table表格合并封装的小插件
- 使用jQuery实现页面表格中相同内容的行或列合并
- 合并table相同单元格的jquery插件
- jquery合并表格中相同文本的相邻单元格
- HTML中表格元素TABLE,TR,TD及属性的语法
- 消除两个线性链表中相同元素的合并
- 数组合并删除两个相同元素方法
- jquery合并表格中相同文本的相邻单元格
- 基于jquery的合并table相同单元格的插件(精简版)
- 【HTML】table表格拆分合并(colspan、rowspan)
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中左侧表头同列相同文本的相邻单元格
- 合并一个List中相同元素,并汇总指定属性
- 合并表格(Table)单元格
- js 根据数组分组动态生成table(相同项合并)