动态行和表
[英]Dynamic Rows and Table
问题描述
我正在尝试实现一个动态表，但是当按下按钮添加一行时，行会被添加，但输入文本框不会插入到两个单元格中。 任何想法如何解决这个问题。
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element = document.createElement("input");
element.type = "text";
element.name = "txtbox[]";
secondCell.appendChild(element);
}
</script>
2 个解决方案
解决方案1
1 2013-12-28 21:25:57
您尚未编写代码以将新文本元素添加到第三列。 在“secondCell.appendChild（element）;”之后添加下面提到的代码 你的代码部分：
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);
解决方案2
1 已采纳 2013-12-28 21:25:58
您需要添加另一个“input”元素并将其附加到thirdCell中。
尝试将javascript函数的最后一位更改为：
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
注意：您的script标记应该放在html的body内部。
这是最终代码的样子：
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
}
</script>
</body>
</html>
表格中表格的动态行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.