单击按钮并使用 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++) {&nbsp;.... }由于您想获取一行中所有元素的值，您可以创建一个数组并将所有值存储在其中，然后将它们处理成一个散列，并根据您的决定进一步处理：let arr = []&nbsp; //before the for looparr[i] = table.row[i]现在，将所有这些放在一起，在您的操作函数（当您单击按钮时触发）中，您将拥有：let arr = []var table = document.getElementById("mytab1");for (var i = 0, row; row = table.rows[i]; i++) {&nbsp; 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)}