实用插件表格行列隐藏显示

点击表格第一行实现隐藏的效果，可点击下面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>

 

posted @ 2017-02-07 14:00  莺哥  阅读(530)  评论(0)  编辑  收藏  举报