Dynamic Rows and Table
Question
I am trying to implement a dynamic table but when the button is pressed to add a row the row is added but the input text box is not inserted in both cells. Any idea how to solve this problem.
<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 answers
solution1
1 2013-12-28 21:25:57
You have not written the code to add a new text element to the third column. Add the below mentioned code after "secondCell.appendChild(element);" section of your code:
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);
solution2
1 ACCPTED 2013-12-28 21:25:58
You need to add another "input" element and append this into the thirdCell.
Try changing the last bit of your javascript function to this:
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);
Your script tag should go inside the body of the html. 您的script标记应该放在html的body内部。
Here is what the final code could look like:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.