Html+js实现表格可编辑，并能动态添加删除行（赞）

今天药忘吃喽~ 2022-05-19 00:25 460阅读 0赞

原文出处：[https://blog.csdn.net/qqliang1314/article/details/41850919 （建义阅读原文）][https_blog.csdn.net_qqliang1314_article_details_41850919]  
效果如下：  
    ![Center][]  功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。  
点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。

1.  `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
2.  `<html xmlns="http://www.w3.org/1999/xhtml">`
3.  `<head>`
4.  `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />`
5.  `<title>编辑表格数据</title>`
6.  `<style type="text/css">`
7.  ``
39. `</style>`
40. `<script>`
41. `/**`
42. `* JS实现可编辑的表格`
43. `* 用法:EditTables(tb1,tb2,tb2,......);`
44. `* Create by Senty at 2008-04-12`
45. `**/`
46.  
47. `//设置多个表格可编辑`
48. `function EditTables(){`
49. `for(var i=0;i<arguments.length;i++){`
50. `SetTableCanEdit(arguments[i]);`
51. `}`
52. `}`
53.  
54. `//设置表格是可编辑的`
55. `function SetTableCanEdit(table){`
56. `for(var i=1; i<table.rows.length;i++){`
57. `SetRowCanEdit(table.rows[i]);`
58. `}`
59. `}`
60.  
61. `function SetRowCanEdit(row){`
62. `for(var j=0;j<row.cells.length; j++){`
63.  
64. `//如果当前单元格指定了编辑类型，则表示允许编辑`
65. `var editType = row.cells[j].getAttribute("EditType");`
66. `if(!editType){`
67. `//如果当前单元格没有指定，则查看当前列是否指定`
68. `editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");`
69. `}`
70. `if(editType){`
71. `row.cells[j].onclick = function (){`
72. `EditCell(this);`
73. `}`
74. `}`
75. `}`
76.  
77. `}`
78.  
79. `//设置指定单元格可编辑`
80. `function EditCell(element, editType){`
81.  
82. `var editType = element.getAttribute("EditType");`
83. `if(!editType){`
84. `//如果当前单元格没有指定，则查看当前列是否指定`
85. `editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");`
86. `}`
87.  
88. `switch(editType){`
89. `case "TextBox":`
90. `CreateTextBox(element, element.innerHTML);`
91. `break;`
92. `case "DropDownList":`
93. `CreateDropDownList(element);`
94. `break;`
95. `default:`
96. `break;`
97. `}`
98. `}`
99.  
100. `//为单元格创建可编辑输入框`
101. `function CreateTextBox(element, value){`
102. `//检查编辑状态，如果已经是编辑状态，跳过`
103. `var editState = element.getAttribute("EditState");`
104. `if(editState != "true"){`
105. `//创建文本框`
106. `var textBox = document.createElement("INPUT");`
107. `textBox.type = "text";`
108. `textBox.className="EditCell_TextBox";`
109.  
110.  
111. `//设置文本框当前值`
112. `if(!value){`
113. `value = element.getAttribute("Value");`
114. `}`
115. `textBox.value = value;`
116.  
117. `//设置文本框的失去焦点事件`
118. `textBox.onblur = function (){`
119. `CancelEditCell(this.parentNode, this.value);`
120. `}`
121. `//向当前单元格添加文本框`
122. `ClearChild(element);`
123. `element.appendChild(textBox);`
124. `textBox.focus();`
125. `textBox.select();`
126.  
127. `//改变状态变量`
128. `element.setAttribute("EditState", "true");`
129. `element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);`
130. `}`
131.  
132. `}`
133.  
134.  
135. `//为单元格创建选择框`
136. `function CreateDropDownList(element, value){`
137. `//检查编辑状态，如果已经是编辑状态，跳过`
138. `var editState = element.getAttribute("EditState");`
139. `if(editState != "true"){`
140. `//创建下接框`
141. `var downList = document.createElement("Select");`
142. `downList.className="EditCell_DropDownList";`
143.  
144. `//添加列表项`
145. `var items = element.getAttribute("DataItems");`
146. `if(!items){`
147. `items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");`
148. `}`
149.  
150. `if(items){`
151. `items = eval("[" + items + "]");`
152. `for(var i=0; i<items.length; i++){`
153. `var oOption = document.createElement("OPTION");`
154. `oOption.text = items[i].text;`
155. `oOption.value = items[i].value;`
156. `downList.options.add(oOption);`
157. `}`
158. `}`
159.  
160. `//设置列表当前值`
161. `if(!value){`
162. `value = element.getAttribute("Value");`
163. `}`
164. `downList.value = value;`
165.  
166. `//设置创建下接框的失去焦点事件`
167. `downList.onblur = function (){`
168. `CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);`
169. `}`
170.  
171. `//向当前单元格添加创建下接框`
172. `ClearChild(element);`
173. `element.appendChild(downList);`
174. `downList.focus();`
175.  
176. `//记录状态的改变`
177. `element.setAttribute("EditState", "true");`
178. `element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);`
179. `}`
180.  
181. `}`
182.  
183.  
184. `//取消单元格编辑状态`
185. `function CancelEditCell(element, value, text){`
186. `element.setAttribute("Value", value);`
187. `if(text){`
188. `element.innerHTML = text;`
189. `}else{`
190. `element.innerHTML = value;`
191. `}`
192. `element.setAttribute("EditState", "false");`
193.  
194. `//检查是否有公式计算`
195. `CheckExpression(element.parentNode);`
196. `}`
197.  
198. `//清空指定对象的所有字节点`
199. `function ClearChild(element){`
200. `element.innerHTML = "";`
201. `}`
202.  
203. `//添加行`
204. `function AddRow(table, index){`
205. `var lastRow = table.rows[table.rows.length-1];`
206. `var newRow = lastRow.cloneNode(true);`
207. `//计算新增加行的序号，需要引入jquery 的jar包`
208. `var startIndex = $.inArray(lastRow,table.rows);`
209. `var endIndex = table.rows;`
210. ` table.tBodies[0].appendChild(newRow);`
211. `newRow.cells[0].innerHTML=endIndex-startIndex;`
212. `SetRowCanEdit(newRow);`
213. `return newRow;`
214.  
215. `}`
216.  
217.  
218. `//删除行`
219. `function DeleteRow(table, index){`
220. `for(var i=table.rows.length - 1; i>0;i--){`
221. `var chkOrder = table.rows[i].cells[0].firstChild;`
222. `if(chkOrder){`
223. `if(chkOrder.type = "CHECKBOX"){`
224. `if(chkOrder.checked){`
225. `//执行删除`
226. `table.deleteRow(i);`
227. `}`
228. `}`
229. `}`
230. `}`
231. `}`
232.  
233. `//提取表格的值,JSON格式`
234. `function GetTableData(table){`
235. `var tableData = new Array();`
236. `alert("行数：" + table.rows.length);`
237. `for(var i=1; i<table.rows.length;i++){`
238. `tableData.push(GetRowData(tabProduct.rows[i]));`
239. `}`
240.  
241. `return tableData;`
242.  
243. `}`
244. `//提取指定行的数据，JSON格式`
245. `function GetRowData(row){`
246. `var rowData = {};`
247. `for(var j=0;j<row.cells.length; j++){`
248. `name = row.parentNode.rows[0].cells[j].getAttribute("Name");`
249. `if(name){`
250. `var value = row.cells[j].getAttribute("Value");`
251. `if(!value){`
252. `value = row.cells[j].innerHTML;`
253. `}`
254.  
255. `rowData[name] = value;`
256. `}`
257. `}`
258. `//alert("ProductName:" + rowData.ProductName);`
259. `//或者这样：alert("ProductName:" + rowData["ProductName"]);`
260. `return rowData;`
261.  
262. `}`
263.  
264. `//检查当前数据行中需要运行的字段`
265. `function CheckExpression(row){`
266. `for(var j=0;j<row.cells.length; j++){`
267. `expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");`
268. `//如指定了公式则要求计算`
269. `if(expn){`
270. `var result = Expression(row,expn);`
271. `var format = row.parentNode.rows[0].cells[j].getAttribute("Format");`
272. `if(format){`
273. `//如指定了格式，进行字值格式化`
274. `row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);`
275. `}else{`
276. `row.cells[j].innerHTML = Expression(row,expn);`
277. `}`
278. `}`
279.  
280. `}`
281. `}`
282.  
283. `//计算需要运算的字段`
284. `function Expression(row, expn){`
285. `var rowData = GetRowData(row);`
286. `//循环代值计算`
287. `for(var j=0;j<row.cells.length; j++){`
288. `name = row.parentNode.rows[0].cells[j].getAttribute("Name");`
289. `if(name){`
290. `var reg = new RegExp(name, "i");`
291. `expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));`
292. `}`
293. `}`
294. `return eval(expn);`
295. `}`
296.  
297. `///`
298. `/**`
299. `* 格式化数字显示方式`
300. `* 用法`
301. `* formatNumber(12345.999,'#,##0.00');`
302. `* formatNumber(12345.999,'#,##0.##');`
303. `* formatNumber(123,'000000');`
304. `* @param num`
305. `* @param pattern`
306. `*/`
307. `/* 以下是范例`
308. `formatNumber('','')=0`
309. `formatNumber(123456789012.129,null)=123456789012`
310. `formatNumber(null,null)=0`
311. `formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12`
312. `formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12`
313. `formatNumber(123456789012.129,'#0.00')=123,456,789,012.12`
314. `formatNumber(123456789012.129,'#0.##')=123,456,789,012.12`
315. `formatNumber(12.129,'0.00')=12.12`
316. `formatNumber(12.129,'0.##')=12.12`
317. `formatNumber(12,'00000')=00012`
318. `formatNumber(12,'#.##')=12`
319. `formatNumber(12,'#.00')=12.00`
320. `formatNumber(0,'#.##')=0`
321. `*/`
322. `function formatNumber(num,pattern){`
323. `var strarr = num?num.toString().split('.'):['0'];`
324. `var fmtarr = pattern?pattern.split('.'):[''];`
325. `var retstr='';`
326.  
327. `// 整数部分`
328. `var str = strarr[0];`
329. `var fmt = fmtarr[0];`
330. `var i = str.length-1;`
331. `var comma = false;`
332. `for(var f=fmt.length-1;f>=0;f--){`
333. `switch(fmt.substr(f,1)){`
334. `case '#':`
335. `if(i>=0 ) retstr = str.substr(i--,1) + retstr;`
336. `break;`
337. `case '0':`
338. `if(i>=0) retstr = str.substr(i--,1) + retstr;`
339. `else retstr = '0' + retstr;`
340. `break;`
341. `case ',':`
342. `comma = true;`
343. `retstr=','+retstr;`
344. `break;`
345. `}`
346. `}`
347. `if(i>=0){`
348. `if(comma){`
349. `var l = str.length;`
350. `for(;i>=0;i--){`
351. `retstr = str.substr(i,1) + retstr;`
352. `if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;`
353. `}`
354. `}`
355. `else retstr = str.substr(0,i+1) + retstr;`
356. `}`
357.  
358. `retstr = retstr+'.';`
359. `// 处理小数部分`
360. `str=strarr.length>1?strarr[1]:'';`
361. `fmt=fmtarr.length>1?fmtarr[1]:'';`
362. `i=0;`
363. `for(var f=0;f<fmt.length;f++){`
364. `switch(fmt.substr(f,1)){`
365. `case '#':`
366. `if(i<str.length) retstr+=str.substr(i++,1);`
367. `break;`
368. `case '0':`
369. `if(i<str.length) retstr+= str.substr(i++,1);`
370. `else retstr+='0';`
371. `break;`
372. `}`
373. `}`
374. `return retstr.replace(/^,+/,'').replace(/\.$/,'');`
375. `}`
376. `</script>`
377. `</head>`
378.  
379. `<body>`
380. `<form id="form1" name="form1" method="post" action="">`
381. `<h3>可编辑的表格</h3>`
382. `<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">`
383. `<tr>`
384. `<td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>`
385. `<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>`
386. `<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td>`
387. `<td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>`
388. `<td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>`
389. `<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>`
390. `</tr>`
391. `<tr>`
392. `<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>`
393. `<td bgcolor="#FFFFFF">1</td>`
394. `<td bgcolor="#FFFFFF" Value="c">C</td>`
395. `<td bgcolor="#FFFFFF">0</td>`
396. `<td bgcolor="#FFFFFF">0</td>`
397. `<td bgcolor="#FFFFFF">0</td>`
398. `</tr>`
399. `<tr>`
400. `<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>`
401. `<td bgcolor="#FFFFFF">2</td>`
402. `<td bgcolor="#FFFFFF" Value="d">D</td>`
403. `<td bgcolor="#FFFFFF">0</td>`
404. `<td bgcolor="#FFFFFF">0</td>`
405. `<td bgcolor="#FFFFFF">0</td>`
406. `</tr>`
407. `</table>`
408.  
409. `<br />`
410. `<input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />`
411. `<input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />`
412. `<input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />`
413. `<input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />`
414. `</form>`
415.  
416. `<script language="javascript" src="GridEdit.js"></script>`
417. `<script language="javascript">`
418. `var tabProduct = document.getElementById("tabProduct");`
419.  
420. `// 设置表格可编辑`
421. `// 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)`
422. `EditTables(tabProduct);`
423.  
424.  
425. `</script>`
426. `</body>`
427. `</html>`

[https_blog.csdn.net_qqliang1314_article_details_41850919]: https://blog.csdn.net/qqliang1314/article/details/41850919
[Center]: /images/20220519/a4accb69633d4b69bc5759ad25f5053a.png