原生js封裝table表格操作,獲取任意行列td,任意單行單列方法


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  

  js包下載地址 點擊在線運行 歡迎大家補充,一起探討!    

 

查看原文-摘自大公爵ddamy.com


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM