Javascript动态创建表格及删除行列的方法

这篇文章主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下

本文实例讲述了Javascript动态创建表格及删除行列的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>动态创建表格(还能删除行列)</title> 
7. <style type="text/css"> 
8. body,div 
9. { 
10. margin:0; 
11. padding:0; 
12. font-size:14px; 
13. } 
14. table 
15. { 
16. margin:0 auto; 
17. } 
18. td 
19. { 
20. border:1px solid green; 
21. text-align:center; 
22. } 
23. </style> 
24. <script type="text/javascript"> 
25. //动态创建表格 
26. function createTable() { 
27. var divMain = document.getElementById("divMain"); 
28. removeAllChild(divMain); //删除上次添加的表格 
29. var myTable = document.createElement("table"); 
30. myTable.id = "DynamicTable"; 
31. var myRow = document.getElementById("myRow").value; 
32. var myCol = document.getElementById("myCol").value; 
33. var trNode; 
34. var tdNode; 
35. var strTmp; 
36. for (var i = 1; i <= myRow; i++) { 
37. trNode = myTable.insertRow(-1); 
38. for (var j = 1; j <= myCol; j++) { 
39. strTmp ="第"+ i + "行,第"+ j + "列"; 
40. tdNode = trNode.insertCell(-1); 
41. tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>"; 
42. } 
43. } 
44. divMain.appendChild(myTable); //把表格添加到div中 
45. //event.srcElement.disabled = "true"; //添加按钮禁用 
46. } 
47. //删除指定节点下的所有子节点 
48. function removeAllChild(nodeObj) { 
49. while (nodeObj.hasChildNodes()) { 
50. nodeObj.removeChild(nodeObj.firstChild); 
51. } 
52. } 
53. //删除行 
54. function DeleteRow() { 
55. var rowNum = document.getElementById("delRow").value; 
56. var tbl = document.getElementById("DynamicTable"); 
57.  
58. if (tbl == null) { 
59. alert('请先创建表格'); 
60. return; 
61. } 
62. if ((rowNum <= tbl.rows.length) && (rowNum > 0)) { 
63. tbl.deleteRow(rowNum-1); 
64. } 
65. else { 
66. alert('请输入一个有效的行!'); 
67. } 
68. } 
69. //删除列 
70. function DeleteCol() { 
71. var colNum = document.getElementById("delCol").value; 
72. var tbl = document.getElementById("DynamicTable"); 
73. if (tbl == null) { 
74. alert('请先创建表格'); 
75. return; 
76. } 
77. if(tbl.rows.length<=0) { 
78. alert('表格不存在行'); 
79. return; 
80. } 
81. if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) { 
82. for (var i = 0; i < tbl.rows.length; i++) { 
83. tbl.rows[i].deleteCell(colNum - 1); 
84. } 
85. } 
86. else { 
87. alert('指定列不存在'); 
88. } 
89. } 
90. </script> 
91. </head> 
92. <body> 
93. 请输入行数<input type="text" id="myRow" />,请输入列数 
94. <input type="text" id="myCol" /><br /> 
95. <input type="button" value="创建表格" onclick="createTable()" /><br /> 
96. <input type="text" id="delRow" /><input type="button" value="删除行" 
97. onclick="DeleteRow()" /><br /> 
98. <input type="text" id="delCol" /><input type="button" value="删除列" 
99. onclick="DeleteCol()" /><br /> 
100. <div id="divMain"> 
101. </div> 
102. </body> 
103. </html> 

希望本文所述对大家的javascript程序设计有所帮助。