How can I target the inner html of each cell in a table row that I've clicked on?

Question

I am trying to create a function on my website so that users can click a "save" button on a particular row of this table that will pull up the innerHtml of the entire row element that they have selected and then Im going to put that info into another page for them as their saved hiking trails.

I have been trying to do this by adding click event listeners to the tables and then accessing the information of the table row through the target.

Does anyone know how I can access the inner html of the whole row and not just the cell that the save button is in?

Here is my html:


            
              Trails
              Province
              Country
            
            
              Lion's Head
              Western Cape
              South Africa
            
            
              Pipe Track
              Western Cape
              South Africa
            
            
              Skeleton Gorge
              Western Cape
              South Africa
            
            
              Table Mountain
              Western Cape
              South Africa
            
            
              King Fisher Trail
              Western Cape
              South Africa
            
            
              Robberg Peninsula
              Western Cape
              South Africa
            
            
              Diep Walle Forest Walk
              Western Cape
              South Africa

And here is the javascript that I have tried to use to target the row that I need.

const save = document.querySelector(".save");
console.log(save);

save.addEventListener("click", (e) => {
  let row = document.getElementsByClassName("tableRow");
  console.log(row[1], row[2], row[3]);
});

This javascript is not targeting the right table cells.

user_3744304 · Answer

You cannot have more than one element in your page with id="save" - id must be unique at all times, per-document. For multiple elements, use a class instead.

That being said, use event.target.closest to find the row from a delegate listener (that is, you install the click listener on an ancestor element and capitalize on the bubbling mechanism of events). This way you also only need one listener.

const table = document.getElementById('myTable');

table.addEventListener("click", (event) => {
  if (event.target.matches('button.save')) {
    const row = event.target.closest('tr');
    console.log(row.innerText);
  }
});


  
    
      Trails
      Province
      Country
    
  
  
    
      Lion's Head
      Western Cape
      South Africa
    
    
      Pipe Track
      Western Cape
      South Africa
    
    
      Skeleton Gorge
      Western Cape
      South Africa
    
    
      Table Mountain
      Western Cape
      South Africa
    
    
      King Fisher Trail
      Western Cape
      South Africa
    
    
      Robberg Peninsula
      Western Cape
      South Africa
    
    
      Diep Walle Forest Walk
      Western Cape
      South Africa

user_4371767 · Answer

You can't give same id's to different elements in DOM but you can create your custom attributes. I created button-id for each button. Then used it to get the row that is clicked.

const save = document.querySelectorAll(".save"); // select all the buttons
const rows = document.querySelectorAll("tr") // select all the rows

console.log(rows)


save.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    let id = e.target.getAttribute('button-id') // get the clicked buttons id
    console.log(id)
    console.log(rows[id]) // with id select the row
  });
})


  
    Trails
    Province
    Country
  
  
    Lion's Head
    Western Cape
    South Africa
  
  
    Pipe Track
    Western Cape
    South Africa
  
  
    Skeleton Gorge
    Western Cape
    South Africa
  
  
    Table Mountain
    Western Cape
    South Africa
  
  
    King Fisher Trail
    Western Cape
    South Africa
  
  
    Robberg Peninsula
    Western Cape
    South Africa
  
  
    Diep Walle Forest Walk
    Western Cape
    South Africa

user_14807111 · Answer

First of all you have to assign the eventListener to all save buttons. After trigger by a click you have access to it by using the event.target function. Then you can go upwards to the parent element tr. Afterwards you can handle the tr element.

Note It would be better to use event.target.closest('tr') to avoid some collisions in the future. If same changes in the code will come. See the comment from @connexo

const save = document.querySelectorAll(".save");

save.forEach(s => {
  s.addEventListener("click", (e) => {    
    const row = e.target.parentNode.parentNode;
    row.classList.toggle('border');
    console.log(row)
    //
  });
});

.border {
  background: red;  
}


            
              Trails
              Province
              Country
            
            
              Lion's Head
              Western Cape
              South Africa
            
            
              Pipe Track
              Western Cape
              South Africa
            
            
              Skeleton Gorge
              Western Cape
              South Africa
            
            
              Table Mountain
              Western Cape
              South Africa
            
            
              King Fisher Trail
              Western Cape
              South Africa
            
            
              Robberg Peninsula
              Western Cape
              South Africa
            
            
              Diep Walle Forest Walk
              Western Cape
              South Africa

How can I target the inner html of each cell in a table row that I've clicked on?

3 Answers