如何向该表添加行？
我在StackOverflow上进行了搜索，但没有找到:(
有人可以帮助我吗？这是我当前的代码：
function addRow(tableID) {
// Get a reference to the table
var tableRef = document.getElementById(tableID);
// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(0);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
// Append a text node to the cell
var newText = document.createTextNode('New top row');
newCell.appendChild(newText);
}
addRow('prova');<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add rows</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="3px" id="prova">
<col width="64" span="2">
<col width="145">
<col width="195">
<col width="145" span="2">
<col width="298">
<col width="241">
<col width="246">
<tr>
<td width="64" bgcolor="#FFF616"><button name="aggiungiRigaMezzi" type="submit" >ADD ROWS 1</button></td>
<td width="64" bgcolor="#FFF616">14</td>
<td width="145" bgcolor="#FFF616">POS Int. 01</td>
<td width="195" bgcolor="#FFF616">Titolo:</td>
<td width="290" colspan="2" bgcolor="#FFF616"> </td>
<td width="298" bgcolor="#FFF616">Caricare eventuali Integrazioni al POS Master</td>
<td width="241" bgcolor="#FFF616"> </td>
<td width="246" bgcolor="#FFF616"> </td>
</tr>
<tr>
<td></td>
<td>14a</td>
<td>POS Int. 02</td>
<td>Titolo:</td>
<td colspan="2"> </td>
<td>Caricare eventuali Integrazioni al POS Master</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td>14b</td>
<td>POS Int. 03</td>
<td>Titolo:</td>
<td colspan="2"> </td>
<td>Caricare eventuali Integrazioni al POS Master</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#FFF616"><button name="aggiungiRigaMezzi" type="submit" >ADD ROWS 2</button></td>
<td bgcolor="#00F305"> </td>
<td colspan="7" bgcolor="#00F305">Allegati al POS</td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">15</td>
<td colspan="2" bgcolor="#00F305">Registro infortuni</td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">16</td>
<td colspan="2" bgcolor="#00F305">Nomina RSPP </td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">17</td>
<td colspan="2" bgcolor="#00F305">Attestato di formazione RSPP</td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">18</td>
<td colspan="2" bgcolor="#00F305">Verbale elezione RLS </td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
</table>
</body>
</html>
当用户单击第一个按钮的“添加行1”功能时，它只会在黄色行下方添加行...
当用户单击第二个按钮时，“添加行2”功能必须添加所有绿色行和所有绿色列。
答案 0 :(得分：0)
我建议使用document.createElement创建tr和td元素，然后将它们附加到表中。您可以像在示例中一样使用textContent或创建textNode来添加文本。
此外，将click事件委托给按钮，以便它们在单击时执行功能。
document.getElementById("button1").addEventListener("click", function() {
addRow("prova");
});
document.getElementById("button2").addEventListener("click", function() {
addRow("prova");
});
function addRow(tableID) {
var newRow = document.createElement("tr");
var newCell = document.createElement("td");
var newText = document.createTextNode("New top row");
newCell.appendChild(newText);
newRow.appendChild(newCell);
document.getElementById(tableID).appendChild(newRow);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add rows</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="3px" id="prova">
<col width="64" span="2">
<col width="145">
<col width="195">
<col width="145" span="2">
<col width="298">
<col width="241">
<col width="246">
<tr>
<td width="64" bgcolor="#FFF616"><button id="button1" name="aggiungiRigaMezzi" type="submit" >ADD ROWS 1</button></td>
<td width="64" bgcolor="#FFF616">14</td>
<td width="145" bgcolor="#FFF616">POS Int. 01</td>
<td width="195" bgcolor="#FFF616">Titolo:</td>
<td width="290" colspan="2" bgcolor="#FFF616"> </td>
<td width="298" bgcolor="#FFF616">Caricare eventuali Integrazioni al POS Master</td>
<td width="241" bgcolor="#FFF616"> </td>
<td width="246" bgcolor="#FFF616"> </td>
</tr>
<tr>
<td></td>
<td>14a</td>
<td>POS Int. 02</td>
<td>Titolo:</td>
<td colspan="2"> </td>
<td>Caricare eventuali Integrazioni al POS Master</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td>14b</td>
<td>POS Int. 03</td>
<td>Titolo:</td>
<td colspan="2"> </td>
<td>Caricare eventuali Integrazioni al POS Master</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#FFF616"><button id="button2" name="aggiungiRigaMezzi" type="submit" >ADD ROWS 2</button></td>
<td bgcolor="#00F305"> </td>
<td colspan="7" bgcolor="#00F305">Allegati al POS</td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">15</td>
<td colspan="2" bgcolor="#00F305">Registro infortuni</td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">16</td>
<td colspan="2" bgcolor="#00F305">Nomina RSPP </td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">17</td>
<td colspan="2" bgcolor="#00F305">Attestato di formazione RSPP</td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
<tr>
<td></td>
<td bgcolor="#00F305">18</td>
<td colspan="2" bgcolor="#00F305">Verbale elezione RLS </td>
<td colspan="2" bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
<td bgcolor="#00F305"> </td>
</tr>
</table>
</body>
</html>