V1.001更新增加findTable-min.js 本次更新，優(yōu)化了代碼性能方面，增加了部分新功能，可以獲取多個table表格批量操作。

考慮到本人后面的項目中可能涉及到大量的表格操作，提前先封了 一個簡單的操作方法，日后再加完善，但對于小頁面需求是完全夠 用的。該方法很強大。

f(elm,boolean).getTableXY(x,y,type)

elm傳入表格選擇器 如果不傳，默認查找table標簽， 使用的是querySelector()和querySelectorAll()選擇器 請注意兼容性。

boolean。選擇取頁面第一個還是取頁面所有符合條件的table數(shù)組 默認為false，查找頁面第一個符合條件的元素。可選。

x：表示第幾行tr

y：表示第幾列td

type：[“all” || “tr” || “td”] all：獲取精確地td對象，第x行，第y列 （4，7，‘a(chǎn)ll’） tr：獲取第x行整行tr。（1，‘tr’） 此處y參數(shù)可省略。 td：獲取第y列整列td。（3，‘td’） 此處x參數(shù)可省略 該方法返回原生DOM對象或原生DOM對象數(shù)組 ?

下面給大家分享js源碼。 ?

0	/***
1	?
2	表格操作插件?V1.001
3	表格操作插件?V1.002
4	1.修復傳參傳入null的錯誤
5	2.修復給每個td綁定傳入錯誤，應該循環(huán)數(shù)組
6	3.給f()返回的數(shù)組綁定方法，可以直接調用
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	//判斷是獲取單個還是獲取所有，最后都要裝進數(shù)組
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	//給數(shù)組直接綁定方法
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	//循環(huán)比較找出符合條件的元素
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	//參數(shù)處理
249	function?parameter(x,y,type){
250	?
251	//避免出現(xiàn)?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

轉載于:https://www.cnblogs.com/webhb/p/5755741.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的原生js封装table表格操作，获取任意行列td，任意单行单列方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。