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 function which is placing some hard coded value in the datatable expanded place . In that place i want to get those td values. !

Here is the code i am posting

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">


<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.min.js"></script>

</head>
<body>

<style type="text/css">
td.details-control {
background:     url('http://www.datatables.net/examples/resources/details_open.png') no-repeat     center center;
 cursor: pointer;
  }
tr.shown td.details-control {
background:   url('http://www.datatables.net/examples/resources/details_close.png') no-repeat    center center;
 }
</style>
<script type="text/javascript" class="init">
  /* Formatting function for row details - modify as you need */
   function format ( d ) {

    var v;

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

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

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


    return '<fieldset> <legend>     </legend>   <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+ 
    '<td>'+v+'</td>'
   '</tr>'

    '</table> </fieldset>' 


  }
  $(document).ready(function() {
    var table = $('#example').DataTable();
   // Add event listener for opening and closing details
    $('#example tbody ').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
}
else {
    // Open this row
    console.log(row);
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
   }
  } );
  // End add event 

 $("#divPopUp").dialog({
    resizable: true,
   autoOpen: false,
   width: 550,
   modal: true,
   buttons: {
    "Save": function() {
        var text = $(this).find( ":checkbox:checked" ).map(function() {
            return this.value+' ';
        }).get().join();

        var obj = $(this).data("opener");
        $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
        $( this ).dialog( "close" );
    },
    Cancel: function() {
        $( this ).dialog( "close" );
    }
},
close:function(){
    $(this).find( ":checkbox" ).removeAttr('checked');
    $( this ).dialog( "close" );
}
});

$('button.btn').on('click', function(){
var title = $(this).parents('td:first').siblings(':eq(0)').text();
console.log("title is : "  + title);
$( "#divPopUp" ).data('opener', this).dialog( "option", "title", title    ).dialog( "open" );
      var text =          $(this).parents('td:first').siblings(':eq(2)').find(':input').val();
if($.trim(text) != ''){
      var texts = text.split(" ,"); 
    $.each(texts, function(i, value){    $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
       });
     }
   });
 } );
   </script>
   <body>
     <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>


    </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>


    </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>    
    </td>
    </tr>
  </tbody>
  </table>

Inside that format function i want to get all td values of datatables.Somebody please help

回答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>

回答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.

回答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/

回答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);
      });

来源：https://stackoverflow.com/questions/28959416/how-to-get-all-the-td-values-of-a-table-in-a-javascript-function

标签

javascript

jquery

html

css

datatables-1.10