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 |