how to get values from table cell dynamically in javascript

Question

This is my code and i am trying to get values by onclick form a table cells dynamically.

let Table = document.querySelector('#recieve-info');
Table.addEventListener('click',(e)=>{     
     if(e.target && e.target.classList.contains('Save-Button')){
        let tr = document.querySelector('tr');
        console.log(tr.firstElementChild);
    }
});

Here is the output in console.log i am getting only the first value of table cell

Codebling · Accepted Answer · 2021-01-08 17:16:00Z

2

.querySelector() only returns the first matching element.

Use .querySelectorAll(), which will return an array of all matching elements. You'll then have to iterate through the array.

        let trs = document.querySelectorAll('tr'); //**** <- note "All" added
        trs.forEach(tr => console.log(tr.firstElementChild));

answered Jan 8, 2021 at 17:16

Codebling

11.5k3 gold badges45 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pauline Nemchak Over a year ago

it will always print all values and isn't it better not to search through all document but use e.target instead?

Codebling Over a year ago

@PaulineNemchak yes, and yes. I'm not saying this is the best way to do things, only explaining why that specific code isn't working. In general I would suggest using React over this style of DOM extraction.

Collectives™ on Stack Overflow

how to get values from table cell dynamically in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related