CODEWITHSUNDEEP
javascripthtml-tableevent-handling
Logan
Logan

Reputation: 45

Javascript - click event on table rows to change HTML elements

I'm still new to JavaScript, so apologies if any of this is unclear:

I have dynamically created a table in JS and added a click handler to each row, which is working fine. But I want that click to change some elements in a separate container I have got in the HTML - i.e. if you click on the 1st row of the table, then that will change the text to show more details about what is in that row.

Where I'm struggling is how to get it so that that clicking on each row will change it to the details for that row (i.e. click on row 2 and it changes to the details for row 2, click on row 5 and it changes to the details for row 5 etc.).

I have a function set up - loadDetails(num), where the parameter num should be the number of the row (e.g. if I call loadDetails(0) it will return the details for the 1st row). So basically I want to create something so that for each row it will call this function with the correct number as the parameter. Any help would be greatly appreciated?

function myFunction() {

    var rows = document.getElementsByTagName("tr");

    for (var i = 0; i < rows.length; i++){
    //code in here?
    //then call the loadDetails() function?  
    }

    //or call the loadDetails() function here?  

}

Edit: here is the code for creating the table - it is basically creating a table with three columns and getting its data from a JSON array (tableOne). So the third line is where I'm struggling - I'm not sure how to assign the id for the tr so that it is unique each time it loops through?

for (var i = 0; i < tableOne.length; i++) { 
    var row1 = document.createElement("tr");
    row1.id = "row" + i;
    row1.addEventListener("click", loadSelected, false);
    var cell1 = document.createElement("td");
    cell1.innerHTML = tableOne[i].firstName;
    var cell2 = document.createElement("td");
    cell2.innerHTML = tableOne[i].lastName;
    var cell3 = document.createElement("td");
    cell3.innerHTML = tableOne[i].age;

    row1.appendChild(cell1);
    row1.appendChild(cell2);
    row1.appendChild(cell3);

    tbody.appendChild(row1);
    table.appendChild(row1);
}

Upvotes: 0

Views: 5122

Answers (2)

Chandru
Chandru

Reputation: 109

You could use rowIndex to get the index of the clicked row

row.addEventListener("click", myfunction, false);

In your function, you can use this.rowIndex to get the index of the clicked row

function myfunction(e) {
  loadDetails(this.rowIndex)
}

Upvotes: 1

Nuwan Attanayake
Nuwan Attanayake

Reputation: 1201

First you need a method of tracking each row in a unique manner.Something like id field of the database table row will help for this. So when you render your table then you could add this value to each row.

How you render your <tr>

<tr id="row1" onClick="myFunction"> Row 01 </tr>
<tr id="row2" onClick="myFunction"> Row 02 </tr>
<tr id="row3" onClick="myFunction"> Row 03 </tr>

Then you can access the id as follows from your function

function myFunction(e) {
  let id = e.target.id; 
  if(id) {
     loadDetails(id);
  }
}

Upvotes: 1

Related Questions