单击每行中的按钮，如何从数组中删除任何数组值

我想删除行以及从数组中删除该值，但我想删除每行上的按钮，并需要删除按钮上的任何索引值点击

如何在每一行上插入删除按钮，并从同一数组中删除行和值？

var users = []
$(document).ready(loadTable);
function loadTable() {
for (var i = 0; i < users.length; i++) {
for (var j = 0; j < users[i].length; j++) {
//console.log(users[i][j])
} {
continue;
}
}
}
$("#submit").on('click', function() {
var temp = [document.getElementById("id").value, document.getElementById("name").value]
users.push(temp)
loadTable($("tbody").append("<tr>" +
"<td>" + $("#id").val() + "</td>" +
"<td>" + $("#name").val() + "</td>" +
//"<td>"+<button href="javascript:void(0);" class="remCF1 btn btn-small btn-danger">Remove</button>+"</td>"+
"</tr>"));
console.log(users)
});

table,
th,
td {
border: 1px solid black;
}

<html>
<head>
<title>Hello</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<button type="button" id="submit">Add</button>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
</html>

您可以通过在表中添加一列来添加按钮，然后添加onclick事件来删除记录。

演示：

var users = [];
$("#submit").on('click', function() {
const id = document.getElementById("id").value;
const name = document.getElementById("name").value;
var temp = [id, name]
users.push(temp)
$("tbody").append("<tr id='row" + id + "'>" +
"<td>" + id + "</td>" +
"<td>" + name + "</td>" +
"<td><button onclick='deleteRecord(" + id + ")'>Remove</button></td>" +
"</tr>");
});
function deleteRecord(id) {
document.querySelector('#row' + id).remove();
const updatedArray = users.filter((user) => Number(user[0]) !== id);
console.log(updatedArray);
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="number" name="id" id="id">
<input type="text" name="name" id="name">
<button type="button" id="submit">Add</button>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
</html>

您需要在每次添加新行时添加一个remove按钮。然后添加addEventListener"；点击"；在单击按钮上，在其中添加一个name。添加到加载表行的代码将类似于以下

"<td>"+"<button class='remCF1 btn btn-small btn-danger'" + "onClick='delRow(" +idLastUser +")' name='delButton'>Delete</button></td>"

然后，在js文件中添加一个函数delete

function delRow(id){
this.users.splice(id, 1);
document.getElementById("row" + id).remove();
updateRowId(id);
}

并创建函数update id，以更新<tr>中的id并更新<button>中delRow函数的输入

function updateRowId(id) {
let tabRows = document.getElementsByTagName("tr");
let buttonRows = document.getElementsByName("delButton");
let updateNum = id;
for (let i = id; i < tabRows.length; i++) {
let updateRowId = tabRows[i].getAttribute("id");
let updateDelRow = "delRow(" + updateNum + ")";
buttonRows[i].setAttribute("onclick", updateDelRow);
document.getElementById(updateRowId).id = "row" + updateNum;
updateNum++;
}
}

整个代码将像这个

var users = [];
$(document).ready(loadTable);
function loadTable() {
for (var i = 0; i < users.length; i++) {
for (var j = 0; j < users[i].length; j++) {
//console.log(users[i][j]);
}
{
continue;
}
}
}
$("#submit").on("click", function () {
var temp = [
document.getElementById("id").value,
document.getElementById("name").value
];
users.push(temp);
var idLastUser = users.length - 1;
loadTable(
$("tbody").append(
"<tr id='row" + idLastUser +"'>" +
"<td>" + $("#id").val() +"</td>" +
"<td>" +$("#name").val() +"</td>" +
"<td>" +
"<button class='remCF1 btn btn-small btn-danger'" +
"onClick='delRow(" + idLastUser + ")' name='delButton'>Delete</button></td>" +
"</tr>"
)
);
//console.log(users);
//console.log(idLastUser);
});
function delRow(id) {
//Remove an array in var of users that has an index of id selected
this.users.splice(id, 1);
//Remove row on table
document.getElementById("row" + id).remove();
//Update id on <tr> and parameter in <button> on delRow function
updateRowId(id);
}
function updateRowId(id) {
let tabRows = document.getElementsByTagName("tr");
let buttonRows = document.getElementsByName("delButton");
let updateNum = id;
for (let i = id; i < tabRows.length; i++) {
let updateRowId = tabRows[i].getAttribute("id");
let updateDelRow = "delRow(" + updateNum + ")";
buttonRows[i].setAttribute("onclick", updateDelRow);
document.getElementById(updateRowId).id = "row" + updateNum;
updateNum++;
}
console.log(this.users);
console.log(tabRows);
}

table,
th,
td {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<button type="button" id="submit">Add</button>
<table id="demo">
<tbody>
</tbody>
</table>

我认为可能有更好、更短的方法。但我还没有找到

如何使用JavaScript 删除表中的表行

相关内容

最新更新

热门标签：