How to show each `td` content when a button is clicked?

Question

Each appended tr tag will have a td list with a different data. So, I want to edit the selected tr tag and showing all td content in the console when a button is clicked. I think this is very easy but I had no idea about this before, Please, any help would be greatly appreciated.

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td id="text">red</td> <td id="text">Small</td> <td id="text">6</td> <td id="text">$10.99</td> <td id="text">2021-03-23</td> <td> <button id="edit">Edit</button> <button id="remove">Remove</button> </td> </tr>`); }); $('tbody').on('click','#edit', function(){ // Ex: console.log(I want to show here all td content); }) $("tbody").on('click', '#remove', function () { $(this).closest('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>

Answer 1

You can use the jQuery methods .closest() and .children() and pass in the element types you are targeting. You can then spread the returned HTMLCollection into an array ( [...HTMLCollection] => this returns an array) so you can iterate over them with a forEach loop and print them one by one or do any other operations you wish.

You had a few issues where multiple elements had the same id . When you need that then rather use classes since ids need to be unique.

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td class="text">red</td> <td class="text">Small</td> <td class="text">6</td> <td class="text">$10.99</td> <td class="text">2021-03-23</td> <td> <button class="edit">Edit</button> <button class="remove">Remove</button> </td> </tr>`); }); $('tbody').on('click','.edit', function(){ let children = [...$(this).closest('tr').children('td.text')]; children.forEach(function(item, index) { console.log(item.innerHTML); }); }); $('tbody').on('click', '.remove', function () { $(this).closest('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>

You can also use the jQuery .text() method:

$('tbody').on('click','.edit', function(){
  console.log( $(this).closest('tr').children('td.text').text() );
});

but that will make the output look like:

redSmall6$10.992021-03-23

Answer 2

IDs must be unique , if not they are no longer Ids

I'd assign the event handler to the tr then check the event target. We are interested in working with the tr after all.

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td class="text">red</td> <td class="text">Small</td> <td class="text">6</td> <td class="text">$10.99</td> <td class="text">2021-03-23</td> <td> <button class="edit">Edit</button> <button class="remove">Remove</button> </td> </tr>`); }); //Event handler for tr $('tbody').on('click','tr', function(event){ //Was the remove button clicked if(event.target.matches(".remove")) { //Remove this row $(this).remove(); //Was the edit button clicked }else if(event.target.matches(".edit")) { //Iterate the text elements $(this).find(".text").each(function(){ console.log($(this).text()); //Do whatever else you need here }); //Aletranatively use map let cellVals = $.map($(this).find(".text"), function(e){ return $(e).text(); }); console.log(cellVals.join("|")); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>