单击按钮并使用 JavaScript（或 jquery）获取同一行单元格的值

Question

因此，我创建了一个带有 for 循环的 html 表，其中包含来自我的 Python 应用程序的对象列表。我现在想实现一个删除功能，为此我需要从单击按钮的同一行中获取单元格的值。我更喜欢用 JavaScript 来做，而不是用 jquery，因为我没有任何经验<table class="table" id="table"><tr>    <th scope="col">#</th>    <th scope="col">Titel</th>    <th scope="col">Interpret</th></tr>{% for song in songs %}<tr>    <td>{{song.id}}</td>    <td>{{song.titel}}</td>    <td>{{song.interpret}}</td>    <td>        <button class="btn btn-danger" type="submit" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button>    </td></tr>{% endfor %}</table>编辑：我查找了提到的那些 .parentNode 和 .previousSibling @Barmar 并尝试为现有的 onclick="get_values(this)" 编写一个函数，我已经添加到上面的按钮中<script>function get_values(this) {var td = this.parentNode;var x = td.previousSibling.innerHTML;console.log(x);}</script>console.log 响应说：“ReferenceError: Can't find variable: get_values”编辑2：所以我终于在避免 ReferenceError 方面取得了进展。我正在尝试不允许使用的函数 get_values(this)，因此我将其更改为函数 get_values(x)。<script>function get_values(x) {    var td = x.parentNode;    interpret = td.previousSibling;    interpret_value = interpret.innerHTML;    titel = interpret.previousSibling.previousSibling.innerHTML;    console.log(titel);    console.log(interpret_value);    }</script></body>我现在遇到的问题是代码实际上没有 .innerHTML 属性就可以工作。所以我实际上回来了，例如去年圣诞节和重击！。但是现在我很难在没有 td-tags 的情况下获取值。我也用 .value 试过了。编辑 3：好的，我想有一个小错误，我现在自己解决了，这是我现在使用的代码，它给了我正确的值。我仍然不明白为什么我需要使用双 .previousSibling 但只要它有效，我很好。感谢所有试图提供帮助的人，我真的很感激。祝大家新年快乐。<script>function get_values(x) {    var td = x.parentNode;    interpret = td.previousSibling.previousSibling;    interpret_value = interpret.innerHTML;    titel = interpret.previousSibling.previousSibling;    titel_value = titel.innerHTML;    console.log(interpret);    console.log(interpret_value);    console.log(titel);    console.log(titel_value);}</script>

Answer 1

首先，假设您已经有一个按钮，您可以像这样编写按钮单击的功能。（在 html 中初始化按钮以进行说明）：

<input type="button" id="deleteBtn" value="Delete">

接下来，在 Javascript 中，您将添加此代码以使按钮在单击时调用“删除”函数（这里我将删除函数命名为“delCells”）：

let delBtn = document.querySelector("#deleteBtn");

delBtn.addEventListener("click", delCells);

这是使按钮动态化的代码（以便在按下时调用删除函数）

现在，在该删除函数中，如果您想使用 Javascript 遍历表中的一系列项目，您首先要将该表标识为您的节点：

var table = document.getElementById("mytab1");

现在您有一个指向您的表的节点，您可以简单地使用 for 循环遍历它：

for (var i = 0, row; row = table.rows[i]; i++) {

 .... }

由于您想获取一行中所有元素的值，您可以创建一个数组并将所有值存储在其中，然后将它们处理成一个散列，并根据您的决定进一步处理：

let arr = []  //before the for loop

arr[i] = table.row[i]

现在，将所有这些放在一起，在您的操作函数（当您单击按钮时触发）中，您将拥有：

let arr = []

var table = document.getElementById("mytab1");

for (var i = 0, row; row = table.rows[i]; i++) {

  arr[i] = table.row[i]

}

此时，您将拥有一个包含所有元素的数组，因此您可以继续尝试完成的任何操作

Answer 2

删除按钮的类型，HTML中的提交按钮类型导致页面不必要地重新加载

<button class="btn btn-danger" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button

在你的按钮上添加一个点击监听器：

document.getElementById("delete_button").onclick = function(this){

console.log(this)

}