原生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