单击一个按钮并使用 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]
}

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

查看此链接以获取有关此主题的更多信息：How do I iterate through table rows and cells in JavaScript?

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)
}