Adding new row to table using javascript
Question
I have searched and found similar answers to this but not exactly and I can't figure out what I'm doing wrong... Thanks for any help you can provide!
<html><head>
<script>
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">
</body></html>
4 answers
solution1
3 ACCPTED 2017-05-23 17:39:23
I suppose it would be more formally correct to use insertCell for each added cell, but just dropping in the whole string will work if you set newRow's innerHTML:
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
// newRow = "<td>New row text</td><td>New row 2nd cell</td>"; <-- won't work
newRow.innerHTML = "<td>New row text</td><td>New row 2nd cell</td>";
}
function doTheInsert() { var newRow=document.getElementById('myTable').insertRow(); newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td>"; }
<table id="myTable" border="1"> <tr> <td>First row</td> <td>First row 2nd cell</td> </tr> <tr> <td>Second row</td> <td>more stuff</td> </tr> </table> <input type="button" onclick="doTheInsert()" value="Insert new row">
solution2
1 2017-05-23 17:36:06
As per MDN , you need to add cells to the row after creating it.
function doTheInsert() { var newRow=document.getElementById('myTable').insertRow(); // Insert a cell in the row at cell index 0 var cell1 = newRow.insertCell(0); // Append a text node to the cell var cell1Text = document.createTextNode('New row text') cell1.appendChild(cell1Text); // Insert a cell in the row at cell index 1 var cell2 = newRow.insertCell(1); // Append a text node to the cell var cell2Text = document.createTextNode('New row 2nd cell') cell2.appendChild(cell2Text); }
<table id="myTable" border="1"> <tr> <td>First row</td> <td>First row 2nd cell</td> </tr> <tr> <td>Second row</td> <td>more stuff</td> </tr> </table> <br> <input type="button" onclick="doTheInsert()" value="Insert new row">
solution3
0 2017-05-23 17:41:25
Take a look at using this instead:
<html><head>
<script>
function doTheInsert() {
var table = document.getElementById('myTable');
var newRow = table.insertRow(-1);
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
newCell1.innerHTML = "New row text";
newCell2.innerHTML = "New row 2nd Cell";
//newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">
</body></html>
The .insertRow(-1) will append the new row to the end of the table, or use .insertRow(0) to prepend the new row to the table.
solution4
-1 2017-05-23 17:35:06
function doTheInsert() {
newRow="<td>New row text</td><td>New row 2nd cell</td>";
document.getElementById('myTable').innerHTML += newRow;
}
Been a while since i did normal javascript. But this should work. Probably not the nicest way to do it.
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.