javascript实现筛选、合并表格_怎样同时筛选两列单元格资源-CSDN文库

共2个文件

css：1个

html：1个

javascript

需积分: 12 42 浏览量 2014-01-17 01:50:54 上传评论收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

.rar （2个子文件）

合并单元格

mergertable.html 7KB

style.css 8KB

<html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Modal Login Window Demo</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <script type="text/javascript"> function MergerTable(){ var dt = document.getElementById("dataTable"); var obj1_1 = null; var obj1_2 = null; var obj1_3 = null; var obj2_1 = null; var obj2_2 = null; var obj2_3 = null; var objh = null; //用于定义高亮行 var i, j, k; //若表格的2、3、4列都一样，那么就删除重复行 for (i = 0; i < dt.rows.length; i++) { //dt.rows(i).cells(7).innerText = (i+1).toString(); //alert(i); for (j = i + 1; j < dt.rows.length; j++) { //alert(j); if (dt.rows(i).cells(1).innerText == dt.rows(j).cells(1).innerText && dt.rows(i).cells(2).innerText == dt.rows(j).cells(2).innerText && dt.rows(i).cells(3).innerText == dt.rows(j).cells(3).innerText) { dt.deleteRow(j); j--; //删除一行以后，下一行的行号占据了已删除行的行号，因此，j--。 } } } //若相邻表格的第2列一样，那么就合并第1、2、4列的单元格。 dt.rows(0).className = "high"; dt.rows(0).cells(0).innerText = 1; for (i = 0; i < dt.rows.length; i++) { //dt.rows(i).cells(0).innerText = i.toString(); if (i>0&&dt.rows(i).className == dt.rows(i - 1).className) { dt.rows(i).className = "high"; } //alert(dt.rows(i).className); obj1_1 = dt.rows(i).cells(0); //对要操作的单元格都用变量定义并读取，这样可以避免在运算过程中直接引用的时候，单元格的index在变化的情况出现。 obj1_2 = dt.rows(i).cells(1); obj1_3 = dt.rows(i).cells(3); //alert(obj1_2.innerText + '_' + i.toString()); k = 0; for (j = 1; j < dt.rows.length - i; j++) { obj2_1 = dt.rows(i+j).cells(0); obj2_2 = dt.rows(i+j).cells(1); obj2_3 = dt.rows(i+j).cells(3); //alert(obj2_2.innerText + '_' + j.toString()); if (obj1_2.innerText == obj2_2.innerText) { k++; obj1_1.rowSpan = (obj1_1.rowSpan | 0) + 1; //合并第一列 obj2_1.parentNode.removeChild(obj2_1); //删除第一列第二行 obj1_2.rowSpan = (obj1_2.rowSpan | 0) + 1; //合并 obj2_2.parentNode.removeChild(obj2_2); obj1_3.rowSpan = (obj1_3.rowSpan | 0) + 1; obj2_3.parentNode.removeChild(obj2_3); dt.rows(i + j).className = dt.rows(i + j - 1).className; } else { dt.rows(i + j).cells(0).innerText = Number(dt.rows(i).cells(0).innerText) + 1; dt.rows(i + j).className += " "+"low"; i = i + k; //alert(i.toString() + '、' + j.toString() +'、'+ k.toString()); break; } } // for (i = 0; i < dt.rows.length; i++) { // alert(dt.rows(i).cells(0).innertext); // } } } </script> </head> <body onload="MergerTable()"> <table id="dataTable" width="500px" cellpadding="1" style="float:left; margin:10px 10px 10px 10px;"> <tr> <td></td> <td>1234</td> <td>4321</td> <td>123432</td> <td>0.1</td> <td>1</td> <td></td> <td>目标格</td> </tr> <tr> <td></td> <td>1234</td> <td>431</td> <td>12342</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>1234</td> <td>4321</td> <td>123</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>124</td> <td>111</td> <td>222</td> <td>0.2</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>124</td> <td>111</td> <td>222</td> <td>0.2</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>4444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>4444</td> <td>4221</td> <td>143</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>443</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> </table> <table id="Table1" width="500px" cellpadding="1" style="float:right; border:solid 1px #00ffff; margin:10px 10px 10px 10px;"> <tr> <td></td> <td>1234</td> <td>4321</td> <td>123432</td> <td>0.1</td> <td>1</td> <td></td> <td>原格</td> </tr> <tr> <td></td> <td>1234</td> <td>431</td> <td>12342</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>1234</td> <td>4321</td> <td>123</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>124</td> <td>111</td> <td>222</td> <td>0.2</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>124</td> <td>111</td> <td>222</td> <td>0.2</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>44444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>4444</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>4444</td> <td>4221</td> <td>143</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> <tr> <td></td> <td>4443</td> <td>4221</td> <td>1432</td> <td>0.1</td> <td>1</td> <td></td> <td></td> </tr> </table> </body> </html>

评论收藏

内容反馈