仅使用javascript在HTML TABLE中添加和删除行

Question

我的任务是创建一个带有添加和删除按钮的HTML表。删除按钮应该在每一行中，以删除整行并自动编制索引。我在索引和添加行之后遇到了问题。如何放置删除按钮？

function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
function addRow() {
var name = document.getElementById("name").value;
var classVariable = document.getElementById("class").value;
var table = document.getElementsByTagName("table")[0]
var newRow = table.insertRow(-1);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = "5";
cell2.innerHTML = name;
cell3.innerHTML = classVariable;

}

<table id="myTable" border="1px">
<tr>
<th>Index</th>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>1</td>
<td>Jhone</td>
<td>10</td>
<td><input type="button" value="Delete" id="btn" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>2</td>
<td>Doe</td>
<td>9</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>3</td>
<td>Mark</td>
<td>10</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>4</td>
<td>James</td>
<td>8</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
Name : <input type="text" name="name" id="name">
Class : <input type="number" name="class" id="class">
<input type="button" value="Add" onclick="addRow()">

Answer 1

我有这个解决方案，也许你可以使用代码。它还防止用户再次输入相同的值。

document.addEventListener("DOMContentLoaded", function(event) {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName("tr");
var buttons = table.getElementsByTagName("button");
var newbutton = document.getElementById("new");
var namefield = document.getElementById("name");
var classfield = document.getElementById("class");
function createIndex(){
for (var i = 0; i < rows.length; i++) {
rows[i].dataset.index = i;
if(i > 0){
rows[i].firstElementChild.innerHTML = i;
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].dataset.index = i+1;
}
}
function createCell(row,i,value){
let cell = row.insertCell(i);
cell.innerHTML = value;
}
function addRow(){
if(namefield.value !== '' && classfield.value !== ''){
let row = table.insertRow(-1);
createCell(row,0,'');
createCell(row,1,namefield.value);
createCell(row,2,classfield.value);
createCell(row,3,'<button class="delete">Delete</button>');
createIndex();
namefield.value = '';
classfield.value = '';
}
else{
alert('Please enter data!');
}
}
function deleteRow(index){
let row = document.querySelector('[data-index="'+index+'"]');
row.parentNode.removeChild(row);
createIndex();
}
var clickEvent = document.addEventListener('click',function(event){
if(event.target.classList.contains('delete')){
deleteRow(event.target.getAttribute('data-index'));
}
if(event.target.id === 'new'){
addRow();
}
event.preventDefault();
});
createIndex();
});

<table id="myTable" border="1px">
<tr>
<th>Index</th>
<th>Name</th>
<th>Class</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>Jhone</td>
<td>10</td>
<td><button class="delete">Delete</button></td>
</tr>
<tr>
<td>2</td>
<td>Doe</td>
<td>9</td>
<td><button class="delete">Delete</button></td>
</tr>
<tr>
<td>3</td>
<td>Mark</td>
<td>10</td>
<td><button class="delete">Delete</button></td>
</tr>
<tr>
<td>4</td>
<td>James</td>
<td>8</td>
<td><button class="delete">Delete</button></td>
</tr>
</table>
Name : <input type="text" name="name" id="name">
Class : <input type="number" name="class" id="class">
<button id="new">+ ADD</button>

Answer 2

我制作了一个reindex函数，该函数通过索引遍历所有列，并将它们设置为迭代器值+1。此函数在删除或添加行的末尾调用。这样可以保持索引正确。

为了添加删除按钮，我创建了新的按钮元素，并使用setAttribute添加了onclick。

function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
reindex();
}
function reindex() {
const ids = document.querySelectorAll("tr > td:nth-child(1)");
ids.forEach( (e, i) => { e.innerText=(i+1) } );
}
function addRow() {
var name = document.getElementById("name").value;
var classVariable = document.getElementById("class").value;
var table = document.getElementsByTagName("table")[0];

// delete button
var button = document.createElement("button");
button.innerHTML = "Delete";
button.setAttribute("onclick", "deleteRow(this)");

var newRow = table.insertRow(-1);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = "5";
cell2.innerHTML = name;
cell3.innerHTML = classVariable;
cell4.appendChild( button );

reindex();
}

<table id="myTable" border="1px">
<tr>
<th>Index</th>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>1</td>
<td>Jhone</td>
<td>10</td>
<td><input type="button" value="Delete" id="btn" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>2</td>
<td>Doe</td>
<td>9</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>3</td>
<td>Mark</td>
<td>10</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>4</td>
<td>James</td>
<td>8</td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
Name : <input type="text" name="name" id="name">
Class : <input type="number" name="class" id="class">
<input type="button" value="Add" onclick="addRow()">