当前位置： 文江博客话题详情

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

发布于 2025-01-18 06:14:31 字数 1513 浏览 6 评论 0原文

我想从数组中删除行并删除该

值？

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>

原文

I want to delete row as well as delete that value from array but I want delete button on each row and need to delete any index value on button click

How can I insert delete button on each row and delete row as well as value from same array ?

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

通知家属抬走 2025-01-25 06:14:31

您可以通过在表中添加一列来添加按钮，然后添加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>

You can achieve it by adding a column in a table to add button and then add onclick event to delete the record.

Demo :

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>

回复 原文
阳光下慵懒的猫 2025-01-25 06:14:31

您需要在每条新行添加的每个新行上添加一个删除按钮。然后添加 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);
}

并创建功能更新ID，以更新<<<代码>＆lt; tr＆gt; 并将输入更新为delrow函数＆lt; button＆gt;

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在表中删除表行

You need to add a remove button on each new line addition. Then add addEventListener "click" on the click button and add a name in it. The code added to the load table line will be like this

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

Then, add a function delete in your js file

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

And create a function update id, to update the id in the <tr> and update the input to the delRow function in the <button>

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++;
  }
}

The overall code will be like this

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>

I think there might be a better and shorter way. But I haven't found it yet

How to remove the table row in a table using JavaScript

回复 原文
~没有更多了~

关于作者

风透绣罗衣

暂无简介

文章
评论
1040 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文