Javascript合并表格中具有相同内容单元格示例
来源:互联网 发布:淘宝网下载电脑版2015 编辑:程序博客网 时间:2024/05/17 02:40
效果图: HTML代码:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格相同内容合并</title>
</head>
<body>
合并前:
<table width="400" border="1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table><br />
合并后:<br />
<table width="400" border="1" id="table1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table>
</body>
</html>
JS:
复制代码 代码如下:
<script type="text/javascript">
function mc(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
if (col >= tb.rows[0].cells.length) {
return;
}
if (col == 0) { endRow = tb.rows.length-1; }
for (var i = startRow; i < endRow; i++) {
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
if (i == endRow - 1 && startRow != endRow) {
mc(tableId, startRow, endRow, col + 1);
}
} else {
mc(tableId, startRow, i + 0, col + 1);
startRow = i + 1;
}
}
}
mc('table1',0,0,0);
</script>
0 0
- Javascript合并表格中具有相同内容单元格示例
- Javascript合并表格中具有相同内容的单元格
- Javascript合并表格相同内容单元格示例
- 一个JAVASCRIPT实用函数,完成合并表格中列中具有相同内容的列单元格的功能
- js合并具有相同内容的单元格,跨行合并!
- javascript根据单元格内容动态合并相同内容单元格
- jquery合并单元格(表格相邻列内容相同合并)
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 合并datagrid中内容相同的单元格
- 用Javascript合并指定表格相同文本的相邻单元格
- GridView相同内容合并单元格
- js 相同内容单元格合并
- 合并内容相同的单元格
- Codecraft-17 and Codeforces Round #391 (Div. 1 + Div. 2, combined) C. Felicity is Coming!组合学+集合
- java常用工具类组件 总结
- 计算前20项和
- python实现解析oui.txt并抽取MAC前缀及组织名称
- 两个在不同包下的 相同的实体类, 为怎么不能同时在hibernate.cfg.xml 中配置?
- Javascript合并表格中具有相同内容单元格示例
- 求100~200间的所有素数,每行打印5个素数
- Ubuntu16.04 apache2.4 修改默认根目录
- js高级程序设计学习笔记2
- 计算字符串中的单词数(单词:由空格分开的连续字母数字串)
- 解决Visual studio编写C#时“未能找到类型名称或命名空间名称XXX...”错误
- Java SE学习笔记:反射、反射创建实例,反射调用方法
- 【LeetCode】 137. Single Number II
- 复数类_所有函数都写在类的内部