How To Get All The Td Values Of A Table In A Javascript Function

I have a datatable in which i am showing child rows expand collapse functionality.It is working well but i want to get the contents of last td of a table.For now i have create a fu

Solution 1:

I did it in jQuery, as you have your last td of each row as nothing I deleted them to show it works using the salary column.

This gets the value of each row's last td, in the function you can do whatever you want to the values.

// Run function for each tbody tr
$("#example tbody tr").each(function() {

  // Within tr we find the last td child element and get content
  alert($(this).find("td:last-child").html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="details-control"></td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td class="details-control"></td>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td class="details-control"></td>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
  </tbody>
</table>

Solution 2:

I tried with jquery.

Code:

$('#example tr td:last-child').each(function () {
    console.log($(this).html());
});

Try this code hopefully this code work's for you.

Solution 3:

Gets the collection of matched elements: last <td> in all rows:

var last_col = $("#example tbody tr td:last-child");

Now you can get the <td> values as an array of numbers (jQuery.map() or Array.prototype.map()):

var values = $.map(last_col.get(), function (td) {
    return +$(td).text().replace(/[\$\,\s]/g, "") || 0;
});

Bonus: If you want sum (or operate) each values in the array (from left-to-right), you can use Array.prototype.reduce()

var total = values.reduce(function (prev, current) { 
    return prev + current;
}, 0 /*starts prev*/);

You can run this code here: https://jsfiddle.net/4kw6yco7/

Solution 4:

Say You want a whole data of a row then

var row = '<tr>' + '<td id="tduid">' + value['uid'] + '</td>' + '<td>' + value['name'] + '</td>' + '<td>' + value['address'] + '</td>' + '<td>' + tags + '</td>' + '<td>' + '<button class="deleteUser btn btn-danger" type="submit" id="del">Edit</button>' + '</td></tr>';

You need the values of this row. So next,

$('#del').click(function(e) {                                                       
     var tuid = $(this).closest('tr').find('#tduid').text();
                alert(tuid);
      });