javascript - 单击按钮并使用 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>

编辑:
我查找了 @Barmar 提到的那些 .parentNode 和 .previousSibling 并尝试为我已经添加到上面按钮的现有 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:找不到变量: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 标签的情况下获取值。我也用 .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?