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

Question

因此，我创建了一个带有for循环的html表，其中包含python应用程序中的对象列表。现在我想实现一个delete函数，为此我需要从单击按钮的同一行获取单元格的值。 我更喜欢用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）”编写一个函数

^{pr2}$

在控制台.log响应称：“ReferenceError:找不到变量：get_values”

编辑2:

所以我终于在避免引用错误方面取得了进展。我正在尝试函数get_values（this），这是不允许的，所以我将它改为function 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属性就可以工作。所以我真的要回来了，比如去年圣诞节和wham！。但是现在我在没有标签的情况下挣扎。我试过了。价值也是。在

编辑3:
好吧，我想是有点小错误，我自己解决了，这是我现在使用的代码，它给了我正确的值。我还是不明白为什么我要用双倍的。以前的兄弟姐妹，但只要有效，我就没事了。感谢所有帮助过我的人，我真的很感激。祝你们新年快乐。在

<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中的“类型提交”按钮会导致页面不必要地重新加载

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

在按钮上添加单击侦听器：

^{pr2}$

Answer 2

首先，假设你已经有了一个按钮，你可以像这样编写按钮点击的功能。 （在html中初始化按钮以便澄清）：

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

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

^{pr2}$

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

现在，在删除函数中， 如果要使用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]

现在，把所有这些放在一起，在您的action函数中（当您单击按钮时将被触发），您将得到：

let arr = []
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  arr[i] = table.row[i]
}

此时，您将拥有一个包含所有元素的数组，因此您可以继续执行您试图完成的任何任务

有关此主题的详细信息，请查看此链接：How do I iterate through table rows and cells in JavaScript?