2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<title>Js动态生成表格</title>
<style type="text/css">
table{font-size:14px}
</style>
</head>
<body >
<script language="javascript">
function tableclick(name1,name2,name3){
Trow=name1.value
Tcol=name2.value
Tv=name3.value
if ((Trow=="") || (Tcol=="") || (Tv=="")){
alert("请将制作表格的条件填写完整")
}
else{
r=parseInt(Trow)
c=parseInt(Tcol)
Table1(r,c,Tv)
}
}
function tablevalue(a,ai,rows,col,str){
int1=a.length
for (i=0i<rows++i){
for (j=0j<col++j){
if ((j==0)&&(ai>=int1)){break}
if (ai>=int1){
str=str+"<td scope='col'></td>"
}
else{
if (j==0){
str=str+"<tr><th scope='col'>"+(a[ai++])+"</th>"
}
else{
if (j==col-1){
str=str+"<td scope='col'>"+(a[ai++])+"</td>"
}
else{
str=str+"<td scope='col'>"+(a[ai++])+"</td>"
}
}
}
}
str=str+"</tr>"
}
return str
}
function Table1(row,col,Str1){
var str=""
a=new Array()
s=new String(Str1)
a=s.split("#")
int1=a.length
ai=0
if (col<=int1){
str=str+"<table width='300' border='4'>"
for (i=0i<col++i){
if (i==0){
str=str+"<tr><th scope='col'>"+(a[ai++])+"</th>"
}
else{
if (i==(col-1)){
str=str+"<th scope='col'>"+(a[ai++])+"</th></tr>"
}
else{
str=str+"<th scope='col'>"+(a[ai++])+"</th>"
}
}
}
if (int1>col){
if (row>1){
str=tablevalue(a,ai,row-1,col,str)
}
}
str=str+ "</table>"
aa.innerHTML=str
}
}
</script>
<form name="form1" method="post" action="">
<p><b>行数：</b>
<input name="name1" type="text" style="width:40px" value="4">
<b>列数：</b>
<input name="name2" type="text" style="width:40px" value="4">
<input type="button" name="Submit3" value="生成表格"
onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p>
<p><b align="top">表值：</b></p>
<p>
<input name="name3" wrap="VIRTUAL" style="width:520px "
value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3">
</p>
</form>
<div id="aa"></div>
</body>
</html>
1．在页面div中创建一个空白表，可以根据需要对其进行定制。
2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。
3.在<TB >标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。
4．获取表中的数据，以供下图参考。
5．一旦我们获得了表中的数据，我们就应该将其转换成json数据的形式。
<table border="1"><tbody id="new">
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById("new")
// 增加行
var newTR= document.createElement("tr")
var newTD1 = document.createElement("td")
var newText1 = document.createTextNode("d")
var newTD2 = document.createElement("td")
var newText2 = document.createTextNode("4")
newTD1.appendChild(newText1)
newTD2.appendChild(newText2)
newTR.appendChild(newTD1)
newTR.appendChild(newTD2)
table.appendChild(newTR)
//增加列
var tr = table.getElementsByTagName("tr")
for(var i=0i<tr.lengthi++) {
var newTD = document.createElement("td")
var newText = document.createTextNode(i)
newTD.appendChild(newText)
tr[i].appendChild(newTD)
}
</script>
