原生js封装table表格操作,获取任意行列td,任意单行单列方法

时间:2023-03-09 02:28:23
原生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