Javascript学习笔记part1(Table单元格相同数据自动合并)补充
2016-05-26 11:39
651 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>合并表格</title> <script> window.onload = function () { init(table1, 6); } /////////////////////////////////////////////// //功能:合并表格 //参数:tb-需要合并的表格ID //参数:colLength--需要对前几列进行合并,比如, //想合并前两列,后面的数据列忽略合并,colLength应为2 //缺省表示对全部列合并 //data:2011.11.06 /////////////////////////////////////////////// function init(tb, colLength) { //检查表格是否规整 if (!checkTable(tb)) return; var i = 0; var j = 0; var rowCount = tb.rows.length; //行数 var colCount = tb.rows[0].cells.length; //列数 var obj1 = null; var obj2 = null; //为每个单元格命名 for (i = 0; i < rowCount; i++) { for (j = 0; j < colCount; j++) { tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString(); } } //逐列检查合并 for (i = 0; i < colCount; i++) { if (i == colLength) return; obj1 = document.getElementById("tb__0_" + i.toString()) for (j = 1; j < rowCount; j++) { obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString()); if (obj1.innerText == obj2.innerText) { obj1.rowSpan++; obj2.parentNode.removeChild(obj2); } else { obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString()); } } } } ///////////////////////////////////////// //功能:检查表格是否规整 //参数:tb--需要检查的表格ID //data: 2011.11.06 ///////////////////////////////////////// function checkTable(tb) { if (tb.rows.length == 0) return false; if (tb.rows[0].cells.length == 0) return false; for (var i = 0; i < tb.rows.length; i++) { if (tb.rows[0].cells.length != tb.rows[i].cells.length) return false; } return true; } </script> </head> <body> <table width="400" border="1" id="table1"> <tr> <td>a</td> <td>for</td> <td>100</td> <td>200</td> <td>1</td> </tr> <tr> <td>a</td> <td>for</td> <td>100</td> <td>300</td> <td>2</td> </tr> <tr> <td>a</td> <td>if</td> <td>100</td> <td>200</td> <td>3</td> </tr> <tr> <td>a</td> <td>if</td> <td>300</td> <td>230</td> <td>4</td> </tr> <tr> <td>a</td> <td>if</td> <td>320</td> <td>230</td> <td>5</td> </tr> </table> </body> </html>
相关文章推荐
- JS常用方法
- 怎么引入(调用)一个JS文件
- 淘宝京东购物车价格计算,商品店铺联动js
- 解析数组json
- JS加载器如何动态加载外部js文件
- JS设计模式之构造函数模式
- 汉字转换为拼音的JavaScript库
- JavaScript 基础
- JS中完美兼容各大浏览器的scrolltop方法
- Data获取字节数据,组成字符串出错 rapidjson解析出错
- JS中语句的另类写法。
- Javascript 严格模式详解
- js前台判断开始时间是否小于结束时间
- JS 学习计算器编写
- Web版 扫雷 JS实现
- 循环取到json中的字段数据,加到html中
- js 事件绑定函数与this的使用
- javascript删除元素节点
- jsp页面静态化
- JS遮罩插件 -- JqLoad