CODEWITHSUNDEEP
jquery
Bhaskar
Bhaskar

Reputation: 1690

Getting all the table td values into array

I need to get all the td values into a string array. Following is my code

var tr = "#tblPurchaseOrders tr.PO1";

     $(tr).each(function(index, tr) {
                    var lines = $(tr + " td").map(function(ind, td) {
                        var ret = {};
                        ret[ind] = $(td).text();
                        return ret;
                    }).get();

    // I need to some more thing here 

    // I need to store all the td values in to lines variable.. This is not working for me.
    // Am I missing some thing?

    });

Thanks.

Upvotes: 5

Views: 26165

Answers (3)

user3657941
user3657941

Reputation:

Assuming row is the result of a jQuery selector, the data can be retrieved as an array using the following:

function get_row_as_array(row) {
    var data = $('td', row).map(function(index, value) {
        return $(value).text();
    });
    return data;
}

I submit this answer as the general case for those who only need the data from one table row.

$(document).ready(function() {
  function get_row_as_array(row) {
    var data = $('td', row).map(function(index, value) {
      return $(value).text();
    });
    return data;
  }

  var row = $('#alphabet tr:eq(1)');
  var result = get_row_as_array(row);
  $('#alphabet tr:eq(2) td:eq(2)').html(result[2]);
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Get Table Row as Array</title>
</head>

<body>
  <table id="alphabet">
    <tr>
      <th>0</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
      <td>Delta</td>
      <td>Echo</td>
    </tr>
    <tr>
      <td>Empty</td>
      <td>Empty</td>
      <td>Empty</td>
      <td>Empty</td>
      <td>Empty</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 0

Gabriel Ramirez
Gabriel Ramirez

Reputation: 5840

Darin Dimitrov's code was very helpful. I modified it to pull from the click.

$('#tblPurchaseOrders tr').click(function(){
    $(this, 'tr').each(function(index, tr) {
       var lines = $('td', tr).map(function(index, td) {
        return $(td).text();
    });
//This assumes that you have a table with an id of tblPurchaseOrders and that you have two cells of data
        alert(lines[0] + ' ' + lines[1]);
    })
});

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

Try like this:

$('#tblPurchaseOrders tr.PO1').each(function(index, tr) {
    var lines = $('td', tr).map(function(index, td) {
        return $(td).text();
    });
    // Here lines will contain an array of all td values for the current row:
    // like ['value 1', 'value 2', 'value 3']

});

Upvotes: 18

Related Questions