[英]Click a button and get values of cells in same row with JavaScript (or jquery)
So I created an html-table with a for loop containing a list of objects from my python application. 因此,我创建了一个带for循环的html表,其中包含来自python应用程序的对象列表。 I now want to implement a delete function and for that I need to get the values of the cells from the same row where the button was clicked.
现在,我想实现一个删除功能,为此,我需要从单击按钮的同一行中获取单元格的值。 I would prefer to do it in JavaScript, not jquery as I don't have any experience with that
我更喜欢用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>
EDIT:
编辑:
I looked up those .parentNode and .previousSibling @Barmar mentioned and tried to write a function for the existing onclick="get_values(this)" I already added to the buttons above 我查找了提到的.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>
The console.log response said: "ReferenceError: Can't find variable: get_values" console.log响应说:“ ReferenceError:找不到变量:get_values”
EDIT 2:
编辑2:
So I finally made progress with avoiding the ReferenceError. 因此,我终于在避免ReferenceError方面取得了进展。 I was trying function get_values(this) which wasn't allowed, so I changed it to function get_values(x).
我正在尝试不允许使用的函数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>
The problem I now have is that the code actually actually works without the .innerHTML properties. 我现在遇到的问题是该代码实际上没有.innerHTML属性也可以正常工作。 So I am actually getting back eg last Christmas and wham!.
所以我实际上要回来了,例如去年圣诞节和傍晚! But now I struggle with just getting the values without the td-tags.
但是现在我很难获得没有td标签的值。 I tried it with .value aswell.
我也尝试使用.value。
EDIT 3:
编辑3:
Okay, I guess there's been a little mistake, I sorted it out by myself now, here's the code I am using now and it gives me the correct values. 好的,我想这是一个小错误,我现在自己整理了一下,这是我现在正在使用的代码,它为我提供了正确的值。 I still don't really get why I need to use the double .previousSibling but aslong as it works, I'm fine.
我仍然不太明白为什么我需要使用double .previousSibling,但是只要有效,我就很好。 Thanks to everyone who tried to help, I really appreciate that.
感谢所有尝试提供帮助的人,对此我深表感谢。 I wish you guys a Happy New Year.
祝大家新年快乐。
<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>
First off, assuming you already have a button, you would code the functionality of a button click like this. 首先,假设您已经有一个按钮,则可以像这样对按钮单击的功能进行编码。 (initialization of button in html for clarification):
(为澄清起见,在html中初始化了按钮):
<input type="button" id="deleteBtn" value="Delete">
Next, in the Javascript, you will add this code to make the button call a "delete" function when clicked (here I named the delete function "delCells"): 接下来,在Javascript中,您将添加以下代码,以使单击该按钮时该按钮调用“删除”功能(在这里,我将删除功能命名为“ delCells”):
let delBtn = document.querySelector("#deleteBtn");
delBtn.addEventListener("click", delCells);
That is the code that will make a button dynamic (so that it will call a delete function upon being pressed) 这是使按钮动态化的代码(以便在按下按钮时调用删除函数)
Now, in that delete function, If you would like to iterate through a series of items in a table using Javascript, you firstly identify the table as your node: 现在,在该删除功能中,如果要使用Javascript遍历表中的一系列项目,请首先将表标识为节点:
var table = document.getElementById("mytab1");
Now that you have a node pointing to your table, you can simply iterate through it with a for loop: 现在您已经有一个指向表的节点,您可以简单地使用for循环遍历它:
for (var i = 0, row; row = table.rows[i]; i++) { .... }
Since you want to get the vales of all the elements in a row, you can create an array and store all of values in that, then process them into a hash and further as you decide: 由于要获取一行中所有元素的值,因此可以创建一个数组并存储其中的所有值,然后将它们处理为哈希值并进一步确定:
let arr = [] //before the for loop
arr[i] = table.row[i]
Now, putting all of it together, in your action function (that is fired when you click the button), you'll have: 现在,将所有内容放在一起,在您的动作函数(单击按钮时触发)中,您将拥有:
let arr = []
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
arr[i] = table.row[i]
}
At this point you'll have an array of all elements, so you can proceed with whatever you were trying to accomplish 此时,您将拥有所有元素的数组,因此您可以继续尝试完成的所有操作
View this link for more information on this topic: How do I iterate through table rows and cells in JavaScript? 查看此链接以获取有关此主题的更多信息: 如何在JavaScript中遍历表行和单元格?
Edit: Remove the type of the button, the type submit button in HTML causes the page to reload unnecessarily 编辑:删除按钮的类型,HTML中的类型提交按钮会导致页面不必要地重新加载
<button class="btn btn-danger" id="delete_button" name="delete_button" onclick="get_values(this)">Delete</button
Add a click listener on your button: 在按钮上添加点击监听器:
document.getElementById("delete_button").onclick = function(this){
console.log(this)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.