V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作。
考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 一个简单的操作方法,日后再加完善,但对于小页面需求是完全够 用的。该方法很强大。
f(elm,boolean).getTableXY(x,y,type)
elm传入表格选择器 如果不传,默认查找table标签, 使用的是querySelector()和querySelectorAll()选择器 请注意兼容性。
boolean。选择取页面第一个还是取页面所有符合条件的table数组 默认为false,查找页面第一个符合条件的元素。可选。
x:表示第几行tr
y:表示第几列td
type:[“all” || “tr” || “td”] all:获取精确地td对象,第x行,第y列 (4,7,‘all’) tr:获取第x行整行tr。(1,‘tr’) 此处y参数可省略。 td:获取第y列整列td。(3,‘td’) 此处x参数可省略 该方法返回原生DOM对象或原生DOM对象数组
下面给大家分享js源码。
0 | /*** |
1 | |
2 | 表格操作插件 V1.001 |
3 | 表格操作插件 V1.002 |
4 | 1.修复传参传入null的错误 |
5 | 2.修复给每个td绑定传入错误,应该循环数组 |
6 | 3.给f()返回的数组绑定方法,可以直接调用 |
7 | 4.修复部分BUG |
8 | Mr.chen |
9 | |
10 | ***/ |
11 | var f = function(tab,flag){ |
12 | |
13 | var findTable = {}, |
14 | f = findTable, |
15 | tabArr = []; |
16 | |
17 | if(tab == true || tab == 'true'){ |
18 | |
19 | tab = 'table'; |
20 | |
21 | flag = true; |
22 | |
23 | }else{ |
24 | |
25 | tab = tab; |
26 | |
27 | } |
28 | |
29 | //判断是获取单个还是获取所有,最后都要装进数组 |
30 | if(flag){ |
31 | |
32 | f.table = document.querySelectorAll(tab); |
33 | |
34 | for(var o = 0; o < f.table.length; o += 1){ |
35 | |
36 | tabArr.push(f.table[o]); |
37 | |
38 | } |
39 | |
40 | }else{ |
41 | |
42 | tab = tab || 'table'; |
43 | |
44 | f.table = document.querySelector(tab); |
45 | |
46 | f.table.length = 1; |
47 | |
48 | tabArr.push(f.table); |
49 | |
50 | } |
51 | |
52 | for(var p = 0; p < tabArr.length; p += 1){ |
53 | |
54 | actionTable(tabArr[p]); |
55 | |
56 | } |
57 | |
58 | //给数组直接绑定方法 |
59 | f.table.getTableXY = function(x,y,type){ |
60 | |
61 | var tableAllArr = [], |
62 | temp = parameter(x,y,type); |
63 | |
64 | x = temp.x; |
65 | |
66 | y = temp.y; |
67 | |
68 | type = temp.type; |
69 | |
70 | |
71 | if(tabArr.length == 1){ |
72 | |
73 | return actionTable(tabArr[0]).getTableXY(x,y,type); |
74 | |
75 | }else{ |
76 | |
77 | for(var p = 0; p < tabArr.length; p += 1){ |
78 | |
79 | tableAllArr.push(actionTable(tabArr[p]).getTableXY(x,y,type)); |
80 | |
81 | } |
82 | |
83 | return tableAllArr; |
84 | |
85 | } |
86 | |
87 | } |
88 | |
89 | function actionTable(obj){ |
90 | |
91 | var f = obj; |
92 | |
93 | //获取当前table所有tr,td,th |
94 | f.refreshTable = function(){ |
95 | |
96 | f.tableTr = obj.querySelectorAll('tr'); |
97 | |
98 | f.tableTd = obj.querySelectorAll('td'); |
99 | |
100 | f.tableTrLength = f.tableTr.length; |
101 | |
102 | f.tableTdLength = f.tableTd.length; |
103 | |
104 | }; |
105 | |
106 | f.refreshTable(); |
107 | |
108 | //给所有td绑定唯一标识 |
109 | f.tableCard = function(){ |
110 | |
111 | var i = 0,k = 0, |
112 | everyTrChild, |
113 | everyTrChildLength; |
114 | |
115 | //可能对table做出增删操作,重新获取, |
116 | f.refreshTable(); |
117 | |
118 | for(i; i < f.tableTrLength; i += 1){ |
119 | |
120 | //为每一个td绑定独立ID |
121 | f.bindXY(f.tableTr[i],i); |
122 | |
123 | } |
124 | |
125 | }; |
126 | |
127 | //为每一个td绑定独立ID |
128 | f.tableTdArr= []; |
129 | |
130 | f.bindXY = function(tr,i){ |
131 | |
132 | var td = tr.querySelectorAll('td'), |
133 | tdLen = td.length; |
134 | |
135 | for(var n = 0; n < tdLen; n += 1){ |
136 | |
137 | td[n].tableX = i; |
138 | |
139 | td[n].tableY = n; |
140 | |
141 | td[n].tableXY = [i,n]; |
142 | |
143 | f.tableTdArr.push(td[n]); |
144 | |
145 | } |
146 | |
147 | }; |
148 | |
149 | f.tableCard(); |
150 | |
151 | |
152 | //获取元素方法 |
153 | f.getTableXY = function(x,y,type){ |
154 | |
155 | var temp = parameter(x,y,type); |
156 | |
157 | x = temp.x; |
158 | |
159 | y = temp.y; |
160 | |
161 | type = temp.type; |
162 | |
163 | //取出精确坐标 |
164 | if(type && type == 'all' || (x && y && y != 'all' && !type)){ |
165 | |
166 | type = 'all'; |
167 | |
168 | return f.eachTable(x,y,type); |
169 | |
170 | }else{ |
171 | |
172 | return f.eachTable(x,y); |
173 | |
174 | } |
175 | |
176 | }; |
177 | |
178 | //循环比较找出符合条件的元素 |
179 | f.eachTable = function(x,y,type){ |
180 | |
181 | if(type && type == 'all'){ |
182 | |
183 | for(var i = 0; i < f.tableTdArr.length; i += 1){ |
184 | |
185 | |
186 | if(x == f.tableTdArr[i].tableXY[0] && y == f.tableTdArr[i].tableXY[1]){ |
187 | |
188 | f.success = f.tableTdArr[i]; |
189 | |
190 | break; |
191 | |
192 | } |
193 | |
194 | } |
195 | |
196 | } |
197 | |
198 | if(y == 'tr'){ |
199 | |
200 | for(var n = 0; n < f.tableTdArr.length; n += 1){ |
201 | |
202 | if(x == f.tableTdArr[n].tableX){ |
203 | |
204 | f.success = f.tableTdArr[n].parentNode; |
205 | |
206 | break; |
207 | |
208 | } |
209 | |
210 | } |
211 | |
212 | } |
213 | |
214 | if(y == 'td'){ |
215 | |
216 | f.success = []; |
217 | |
218 | for(var m = 0; m < f.tableTrLength; m += 1){ |
219 | |
220 | var tbtr = f.tableTr[m].querySelectorAll('td'); |
221 | |
222 | //console.log(tbtr); |
223 | |
224 | for(k = 0; k < tbtr.length; k += 1){ |
225 | |
226 | if(x == tbtr[k].tableY){ |
227 | |
228 | f.success.push(tbtr[k]); |
229 | |
230 | continue; |
231 | } |
232 | |
233 | } |
234 | |
235 | } |
236 | |
237 | } |
238 | |
239 | return f.success; |
240 | |
241 | }; |
242 | |
243 | return f; |
244 | |
245 | } |
246 | |
247 | |
248 | //参数处理 |
249 | function parameter(x,y,type){ |
250 | |
251 | //避免出现 0 == false |
252 | if(x == 0){ |
253 | |
254 | x = '0'; |
255 | |
256 | } |
257 | |
258 | if(y == 0){ |
259 | |
260 | y = '0'; |
261 | } |
262 | |
263 | if(y == null && type == 'tr'){ |
264 | |
265 | y = type; |
266 | |
267 | } |
268 | |
269 | if(x == null && type == 'td'){ |
270 | |
271 | x = y; |
272 | |
273 | y = type; |
274 | |
275 | } |
276 | |
277 | return { |
278 | x : x, |
279 | y : y, |
280 | type : type |
281 | } |
282 | |
283 | } |
284 | |
285 | return f.table; |
286 | |
287 | }; |
288 | |
289 |