Click a button and get values of cells in same row with JavaScript (or jquery)

Question

So I created an html-table with a for loop containing a list of objects from my python application. 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

<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

<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"

EDIT 2:

So I finally made progress with avoiding the ReferenceError. I was trying function get_values(this) which wasn't allowed, so I changed it to 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>

The problem I now have is that the code actually actually works without the .innerHTML properties. So I am actually getting back e.g. last Christmas and wham!. But now I struggle with just getting the values without the td-tags. I tried it with .value aswell.

EDIT 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. 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>

Answer 1

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

<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"):

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:

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 (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?

Answer 2

Edit: Remove the type of the button, the type submit button in HTML causes the page to reload unnecessarily

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