CODEWITHSUNDEEP
javascripthtmljquery
mowx
mowx

Reputation: 77

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

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>

Upvotes: 0

Views: 106

Answers (2)

Jon P
Jon P

Reputation: 19772

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>

Upvotes: 1

Ivan86
Ivan86

Reputation: 5708

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

Upvotes: 2

Related Questions