点击表格第一行实现隐藏的效果,可点击下面demo进行测试
本篇姊妹编表格按列合并的代码
代码说明
目前代码只能支持两行表头或者一行表头的表格,且第二行表格中无colspan,后面如果有也会尝试进行优化追加,考虑更多情况,目前的方法是点击第一行就实现隐藏当然可以考虑dbclick等别的触发,后期的维护应该围绕表头的行数
使用方式
tableOpration.init('list_json', 2)其中list_json表示表格的id,2表示表格的表头有几行
11111 | 面料名称 | 面料颜色 | 面料色号 | 材料性质 | 单位 | ||
---|---|---|---|---|---|---|---|
面料名称 | 面料名称 | 单位 | 单位 | ||||
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 | |
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 | |
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 | |
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 | |
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 | |
11111111 | 972023-82 | 80 | 81 | 82 | 83 | 83 |
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <script> 8 (function (window) { 9 var tableOpration = window.tableOpration = {}; 10 tableOpration.rowHide = function (id, index) { 11 var obj = document.getElementById(id); 12 obj.rows[index].style.display = "none"; 13 14 } 15 //隐列 16 tableOpration.hideRow = function (id, index, cellIndex, ths) { 17 var obj = document.getElementById(id); 18 var cellsColSpan = 0; 19 var cells2ColSpan = 0; 20 var rowSpanNum=0; 21 var cells = obj.rows[0].cells; 22 var cells2 = obj.rows[1].cells; 23 for (var m = 0; m < cellIndex; m++) { 24 if (cells[m].colSpan > 1) { 25 cellsColSpan += cells[m].colSpan - 1; 26 } 27 if (cells[m].rowSpan > 1) { 28 rowSpanNum++; 29 } 30 } 31 cells[cellIndex].setAttribute('data-num', rowSpanNum); 32 if (ths == 2) { 33 for (var m = 0; m < cellIndex-cells[index[0]-cellsColSpan- cells[index[0] - cellsColSpan].getAttribute('data-num')]; m++) { 34 if (cells2[m].colSpan > 1) { 35 cells2ColSpan += cells2[m].colSpan - 1; 36 } 37 } 38 } 39 40 if (index instanceof Array) { 41 for (var j = 0; j < index.length; j++) { 42 for (var i = 0; i < obj.rows.length; i++) { 43 if (obj.rows[0].cells[index[0] - cellsColSpan].rowSpan == 1 && obj.rows[0].cells[index[0] - cellsColSpan].colSpan == 1) { 44 if (i == 0) { 45 obj.rows[0].cells[index[0] - cellsColSpan].style.display = "none"; 46 } else { 47 obj.rows[i].cells[index[j]].style.display = "none"; 48 } 49 } else if (obj.rows[0].cells[index[0] - cellsColSpan].colSpan > 1 && obj.rows[0].cells[index[0] - cellsColSpan].rowSpan == 1) { 50 if (ths == 2) { 51 if (i <= 1) { 52 if (obj.rows[0].cells[index[0] - cellsColSpan].getAttribute('data-num')) { 53 if (i == 0) { 54 obj.rows[i].cells[index[0] - cellsColSpan].style.display = "none"; 55 } else { 56 obj.rows[i].cells[index[j] - cells2ColSpan - obj.rows[0].cells[index[0] - cellsColSpan].getAttribute('data-num')].style.display = "none"; 57 } 58 } else { 59 obj.rows[i].cells[index[j] - cellsColSpan].style.display = "none"; 60 } 61 } else { 62 obj.rows[i].cells[index[j]].style.display = "none"; 63 } 64 } 65 else { 66 if (i == 0) { 67 obj.rows[0].cells[index[0] - cellsColSpan].style.display = "none"; 68 } else { 69 obj.rows[i].cells[index[j]].style.display = "none"; 70 } 71 72 } 73 } else if (obj.rows[0].cells[index - cellsColSpan].colSpan == 1 && obj.rows[0].cells[index - cellsColSpan].rowSpan > 1) { 74 if (ths == 2) { 75 if (i <= 1) { 76 obj.rows[0].cells[index[0] - cellsColSpan].style.display = "none"; 77 } else { 78 obj.rows[i].cells[index[j]].style.display = "none"; 79 } 80 } 81 } 82 } 83 } 84 } 85 86 87 } 88 89 90 // 显列 91 tableOpration.initshow = function (id) { 92 var obj = document.getElementById(id); 93 for (var i = 0; i < obj.rows.length; i++) { 94 for (var j = 0; j < obj.rows[i].cells.length; j++) { 95 obj.rows[i].cells[j].style.display = ""; 96 } 97 } 98 } 99 tableOpration.init = function (id, ths) { 100 var cells = document.getElementById(id).rows[0].cells; 101 for (var i = 0; i < cells.length; i++) { 102 cells[i].onclick = function (e) { 103 var arr = []; 104 var index = 0; 105 var rowSpanNum = 0; 106 for (var j = 0; j < this.cellIndex; j++) { 107 if (cells[j].colSpan > 1) { 108 index += cells[j].colSpan - 1; 109 } 110 if (cells[j].rowSpan > 1) { 111 rowSpanNum++; 112 } 113 } 114 this.setAttribute('data-num', rowSpanNum); 115 if (this.colSpan !== 1) { 116 for (var j = 0; j < this.colSpan; j++) { 117 arr.push(this.cellIndex + j + index); 118 } 119 120 } else { 121 arr = [this.cellIndex + index]; 122 } 123 tableOpration.hideRow(id, arr, this.cellIndex, ths); 124 arr = []; 125 } 126 } 127 } 128 })(window) 129 window.onload = function () { 130 // tableOpration.hideRow("list_json",3); 131 tableOpration.hideRow('list_json',[1,2],1 ,2); 132 tableOpration.init("list_json",2); 133 document.getElementById("tableShow").onclick = function () { 134 //隐藏列 135 tableOpration.initshow("list_json"); 136 } 137 //隐藏行 138 tableOpration.rowHide("list_json", 4) 139 } 140 </script> 141 <body> 142 <button id="tableShow">显示全部</button> 143 <table id="list_json" class="table table-bordered "> 144 <thead> 145 <tr> 146 <th rowspan="2">11111</th> 147 <th colspan="2">面料名称</th> 148 <th rowspan="2">面料颜色</th> 149 <th rowspan="2">面料色号</th> 150 <th rowspan="2">材料性质</th> 151 <th colspan="2">单位</th> 152 </tr> 153 <tr> 154 <th>面料名称</th> 155 <th>面料名称</th> 156 <th>单位</th> 157 <th>单位</th> 158 </tr> 159 </thead> 160 <tbody> 161 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 162 <td> 163 <input type="checkbox" data-column="id" value="129"> 164 </td> 165 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 166 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 167 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 168 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 169 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 170 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 171 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 172 </tr> 173 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 174 <td> 175 <input type="checkbox" data-column="id" value="129"> 176 </td> 177 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 178 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 179 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 180 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 181 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 182 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 183 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 184 </tr> 185 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 186 <td> 187 <input type="checkbox" data-column="id" value="129"> 188 </td> 189 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 190 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 191 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 192 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 193 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 194 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 195 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 196 </tr> 197 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 198 <td> 199 <input type="checkbox" data-column="id" value="129"> 200 </td> 201 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 202 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 203 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 204 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 205 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 206 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 207 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 208 </tr> 209 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 210 <td> 211 <input type="checkbox" data-column="id" value="129"> 212 </td> 213 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 214 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 215 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 216 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 217 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 218 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 219 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 220 </tr> 221 <tr class="clickShowTbl" data-type="data" style="display: table-row;"> 222 <td> 223 <input type="checkbox" data-column="id" value="129"> 224 </td> 225 <td><input type="hidden" data-column="mlName" value="972023-82"><span data-column="mlName">11111111</span></td> 226 <td><input type="hidden" data-column="mlNo" value="972023-82"><span data-column="mlNo">972023-82</span></td> 227 <td><input type="hidden" data-column="color" value="82"><span data-column="color">80</span></td> 228 <td><input type="hidden" data-column="colorCode" value="82"><span data-column="colorCode">81</span></td> 229 <td><input type="hidden" data-column="color" value="82"><span data-column="color">82</span></td> 230 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 231 <td><input type="hidden" data-column="color" value="82"><span data-column="color">83</span></td> 232 </tr> 233 234 </tbody> 235 </table> 236 </body> 237 </html>