超级简单Table表格添加,删除行

Myth丶恋晨 2022-05-19 00:24 290阅读 0赞

原文出处：[https://blog.csdn.net/love\_xiolan/article/details/52241100 （原文更易阅读）][https_blog.csdn.net_love_xiolan_article_details_52241100]

# Table表格添加,删除行 #

最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢!

需要的拿去,转载请在明显的位置标注出出处!!!

1.  `<html>`
2.  `<head>`
3.  `<title>table添加/删除行</title>`
4.  `</head>`
5.  `<body>`
6.  `<table id="testTbl" border=1>`
7.  `<tr>`
8.  `<td>性别</td>`
9.  `<td>姓名</td>`
10. `<td>年龄</td>`
11. `</tr>`
12. `<tr>`
13. `<td>`
14. `<select name="a">`
15. `<option value="男">男</option>`
16. `<option value="女">女</option>`
17. `</select>`
18. `</td>`
19. `<td>`
20. `<input type="text" name="b">`
21. `</td>`
22. `<td>`
23. `<input type="text" name="c">`
24. `</td>`
25. `</tr>`
26. `</table>`
27. `<input type="button" name="Submit2" value="添加" onclick="addRow()">`
28. `<script>`
29. `function addRow(){`
30.  
31. `//添加行`
32. `var newTr = testTbl.insertRow();`
33.  
34. `//添加列`
35. `var newTd0 = newTr.insertCell();`
36. `var newTd1 = newTr.insertCell();`
37. `var newTd2 = newTr.insertCell();`
38. `var newTd3 = newTr.insertCell();`
39.  
40. `//设置列内容和属性`
41. `newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;`
42. `newTd1.innerText = document.all("b").value;`
43. `newTd2.innerText = document.all("c").value;`
44. `newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';`
45. `}`
46. `function del(o){`
47. `//获取表格`
48. `var t=document.getElementById('testTbl');`
49. `//删除当前行`
50. `t.deleteRow(o.parentNode.parentNode.rowIndex)`
51. `}`
52. `</script>`
53. `</body>`
54. `</html>`

1.  `//动态添加行`
2.  `function addRow(){`
3.  `var table = document.getElementById("tableID");`
4.  `var newRow = table.insertRow(); //创建新行`
5.  `var newCell1 = newRow.insertCell(); //创建新单元格`
6.  `newCell.innerHTML = ""； //单元格内的内容`
7.  `newCell.setAttribute("align","center"); //设置位置`
8.  `}`
9.   
10. `//动态删除行`
11. `function deleteRow(){`
12. `var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;`
13. `var styles = document.getElementById("tableID");`
14. `styles.deleteRow(rowIndex);`
15. `}`

用克隆的方式

1.  `<html>`
2.  `<head>`
3.  `<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>`
4.  `<script type="text/javascript">`
5.  `var index = 0;`
6.  `$(document).ready(function(){`
7.  `$("button").click(function(){`
8.  `index++;`
9.  `$("body").append($("p").clone().attr({'id':'name'+index,'name':'pwd'+index}));`
10. `});`
11. `});`
12. `</script>`
13. `</head>`
14. `<body>`
15. `<p>This is a paragraph.</p>`
16. `<button>复制每个 p 元素，然后追加到 body 元素</button>`
17. `</body>`
18. `</html>`

下面是直接添加和删除当前table表格,很好用

1.  `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`
2.  `<html>`
3.  `<head>`
4.  `<base href="<%=basePath%>">`
5.  `<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />`
6.  `<meta http-equiv="pragma" content="no-cache">`
7.  `<meta http-equiv="cache-control" content="no-cache">`
8.  `<meta http-equiv="expires" content="0">`
9.  `<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">`
10. `<meta http-equiv="description" content="This is my page">`
11. `<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>`
12. `</head>`
13. `<body>`
14. `<a href = "javascript:void(0);" onclick="a();">添加</a>`
15. `<a href = "javascript:void(0);" onclick="b();">显示</a>`
16. `<table id = "tab"></table>`
17. `</body>`
18. `<script type="text/javascript">`
19. `var index = 0;`
20. `var a = function(){`
21. `index++;`
22.  
23. `var tab = "<table id = 'tab_"+index+"' border = '1' >";`
24. `tab += "<tr><td colspan = '6' align = 'center'>尺寸规格</td></tr>";`
25. `tab += "<tr><td>长度</td><td><input onblur='b("+index+");' id = 'cd_"+index+"' /></td><td align = 'right'>宽度</td><td><input onblur='b("+index+");' id = 'kd_"+index+"' /></td><td>数量(个)</td><td><input onblur='c("+index+");' id = 'sl_"+index+"' /></td></tr>";`
26. `tab += "<tr><td>摆放区域</td><td><input id = 'bfqy_"+index+"' /></td><td>单个面积(平方米)</td><td><input readonly = 'readonly' id = 'dgmj_"+index+"' /></td><td>总面积</td><td><input readonly = 'readonly' id = 'zmj_"+index+"' /></td></tr>";`
27. `tab += "<tr><td>内容描述</td><td colspan = '4'><textarea rows='3' cols='70' id = 'content_"+index+"' ></textarea></td><td><input type = 'button' value = '删除' onclick = 'del("+index+");' id = 'del_"+index+"' /></td></tr>";`
28. `tab += "</table>";`
29. `$('#tab').append(tab);`
30. `}`
31.  
32.  
33. `function del(ind){`
34. `$('#tab_'+ind).remove();`
35. `}`
36.  
37. `function b(ind){`
38. `var cdd = $('#cd_'+ind).val();`
39. `var kdd = $('#kd_'+ind).val();`
40. `if(cdd==''){cdd = 1;}`
41. `if(kdd==''){kdd = 1;}`
42. `if(cdd==''&&kdd==''){`
43. `$('#dgmj_'+ind).val('');`
44. `}else{`
45. `$('#dgmj_'+ind).val(cdd * kdd);`
46. `}`
47. `}`
48. `function c(ind){`
49. `var cdd = $('#cd_'+ind).val();`
50. `var kdd = $('#kd_'+ind).val();`
51. `var sll = $('#sl_'+ind).val();`
52. `if(cdd==''){cdd = 1;}`
53. `if(kdd==''){kdd = 1;}`
54. `if(sll==''){sll = 1;}`
55. `if(cdd==''&&kdd==''&&sll==''){`
56. `$('#zmj_'+ind).val('');`
57. `}else if(cdd!=''&&kdd!=''&&sll!=''){`
58. `$('#zmj_'+ind).val(cdd * kdd * sll);`
59. `}else{`
60. `$('#zmj_'+ind).val('');`
61. `}`
62.  
63. `}`
64. `</script>`
65. `</html>`

[https_blog.csdn.net_love_xiolan_article_details_52241100]: https://blog.csdn.net/love_xiolan/article/details/52241100