我试图创建一个程序，使用添加行按钮使用HTML表中的Javascript动态添加行。似乎有错误。
<html>
<head>
<title>Home - First Website</title>
<style>
table{
width: 100%;
}
td{
padding: 8px;
border: 1px solid;
}
input[type="text"]{
width: 100%;
}
</style>
<script type="text/javascript">
function add(){
var num=parseInt(document.getElementById("t1").length+1);
var a=document.createElement("td");
var anode=document.createTextNode(num);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
var b=document.createAttribute("type");
b.value="checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
b=document.createAttribute("type");
b.value="text";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
}
</script>
</head>
<body>
<table name="t1">
<tr>
<input type="button" value="Add Row" onclick="add()">
</tr>
<tr>
<td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
</tr>
</table>
</body>
</html>
最佳答案
代码中存在多个问题：
1）添加行，你为什么这样做：
var num=parseInt(document.getElementById("t1").length+1);
：请注意，您尚未为表格指定任何ID。
我认为您需要计数才能对行进行编号。您可以通过以下方式获得：
var num =document.getElementById("t1").rows.length;
2）要添加行，您尚未创建
<tr>元素！这是更正后的jsFiddle：
http://jsfiddle.net/thecbuilder/kCm2D/1/
更新：更改了获取行数的方式。
js
function add() {
var num = var num =document.getElementById("t1").rows.length;
console.log(num);
var x = document.createElement("tr");
var a = document.createElement("td");
var anode = document.createTextNode(num);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
var b = document.createAttribute("type");
b.value = "checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
b = document.createAttribute("type");
b.value = "text";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
document.getElementById("t1").appendChild(x);
}
html
<table id="t1" name="t1"> <!-- "t1" is id as well -->
<tr>
<input type="button" value="Add Row" onclick="add()" />
</tr>
<tr>
<td>1.</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>