我创建了一个动态HTML表格，用户可以根据需要添加/删除行。一次将完成2行。因此，当您单击“添加行”时，将显示另外两行。有一次，我点击“添加行”两次，HTML表格中将有3组2行。问题是当我单击“删除”到中间集时，不会删除整个2行。它有第二组和第三组的第一排。这意味着第二组和第三组的第二行被删除。
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
cell1.innerHTML = "<b><center> Start Date </center></b>";
cell2.innerHTML = "<input type='date' name='startdate[]' id='startdate'>";
cell3.innerHTML = "<b><center> End Date </center></b>";
cell4.innerHTML = "<input type='date' name='enddate[]' id='enddate'>";
cell5.innerHTML = "<b><center> Employer Name </center></b>";
cell6.innerHTML = "<input type='text' name='employername[]' id='employername'>";
cell7.innerHTML = "<b><center> Position Held </center></b>";
cell8.innerHTML = "<input type='text' name='position[]' id='position'>";
var table2 = document.getElementById("myTable");
var row = table.insertRow(3);
var cell9 = row.insertCell(0);
var cell10 = row.insertCell(1);
var cell11 = row.insertCell(2);
var cell12 = row.insertCell(3);
var cell13 = row.insertCell(4);
var cell14 = row.insertCell(5);
var cell15 = row.insertCell(6);
var cell16 = row.insertCell(7);
cell9.innerHTML = "<b><center> Job Site </center></b>";
cell10.innerHTML = "<input type='text' name='jobsite[]' id='jobsite'>";
cell11.innerHTML = "<b><center> Monthly Salary </center></b>";
cell12.innerHTML = "<input type='number' name='salary[]' id='salary'>";
cell13.innerHTML = "<b><center> Reason for Leaving </center></b>";
cell14.innerHTML = "<input type='text' name='leavingreason[]' id='leavingreason'>";
cell15.innerHTML = "<b><center> Action </center></b>";
cell16.innerHTML = "<input type='button' value = 'Delete' onClick='Javacsript:deleteRow(this)'>"
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTable");
table.deleteRow(index);
var index2 = obj.parentNode.parentNode.rowIndex;
var table2 = document.getElementById("myTable");
table.deleteRow(index2);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable" class="table table-bordered" cellspacing=2.5 cellpadding=7.5 id="data_table" border=1>
<tr>
<th>Start Date</th>
<td><input type="date" name="startdate[]" id="startdate"></td>
<th>End Date</th>
<td><input type="date" name="enddate[]" id="enddate"></td>
<th>Employer Name</th>
<td><input type="text" name="employername[]" id="employername"></td>
<th>Position Held</th>
<td><input type="text" name="position[]" id="position"></td>
</tr>
<tr>
<th>Job Site</th>
<td><input type="text" name="jobsite[]" id="jobsite"></td>
<th>Monthly Salary</th>
<td><input type="number" name="salary[]" id="salary"></td>
<th>Reason for Leaving</th>
<td><input type="text" name="leavingreason[]" id="leavingreason"></td>
<th>Action</th>
<td></td>
</tr>
</table>
<br>
<button onclick="myFunction()" >Add Row</button>
</body>
</html>
答案 0 :(得分：1)
您已经知道一个索引，因此您可以简单地减少该数字以获得上一行ID并将其删除
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
cell1.innerHTML = "<b><center> Start Date </center></b>";
cell2.innerHTML = "<input type='date' name='startdate[]' id='startdate'>";
cell3.innerHTML = "<b><center> End Date </center></b>";
cell4.innerHTML = "<input type='date' name='enddate[]' id='enddate'>";
cell5.innerHTML = "<b><center> Employer Name </center></b>";
cell6.innerHTML = "<input type='text' name='employername[]' id='employername'>";
cell7.innerHTML = "<b><center> Position Held </center></b>";
cell8.innerHTML = "<input type='text' name='position[]' id='position'>";
var table2 = document.getElementById("myTable");
var row = table.insertRow(3);
var cell9 = row.insertCell(0);
var cell10 = row.insertCell(1);
var cell11 = row.insertCell(2);
var cell12 = row.insertCell(3);
var cell13 = row.insertCell(4);
var cell14 = row.insertCell(5);
var cell15 = row.insertCell(6);
var cell16 = row.insertCell(7);
cell9.innerHTML = "<b><center> Job Site </center></b>";
cell10.innerHTML = "<input type='text' name='jobsite[]' id='jobsite'>";
cell11.innerHTML = "<b><center> Monthly Salary </center></b>";
cell12.innerHTML = "<input type='number' name='salary[]' id='salary'>";
cell13.innerHTML = "<b><center> Reason for Leaving </center></b>";
cell14.innerHTML = "<input type='text' name='leavingreason[]' id='leavingreason'>";
cell15.innerHTML = "<b><center> Action </center></b>";
cell16.innerHTML = "<input type='button' value = 'Delete' onClick='Javacsript:deleteRow(this)'>"
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTable");
console.log(index);
table.deleteRow(index);
table.deleteRow(index-1);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable" class="table table-bordered" cellspacing=2.5 cellpadding=7.5 id="data_table" border=1>
<tr>
<th>Start Date</th>
<td><input type="date" name="startdate[]" id="startdate"></td>
<th>End Date</th>
<td><input type="date" name="enddate[]" id="enddate"></td>
<th>Employer Name</th>
<td><input type="text" name="employername[]" id="employername"></td>
<th>Position Held</th>
<td><input type="text" name="position[]" id="position"></td>
</tr>
<tr>
<th>Job Site</th>
<td><input type="text" name="jobsite[]" id="jobsite"></td>
<th>Monthly Salary</th>
<td><input type="number" name="salary[]" id="salary"></td>
<th>Reason for Leaving</th>
<td><input type="text" name="leavingreason[]" id="leavingreason"></td>
<th>Action</th>
<td></td>
</tr>
</table>
<br>
<button onclick="myFunction()" >Add Row</button>
</body>
</html>