Getting values from a table in html using jQuery

Question

I am trying to get the values for Date1 Date2 Date3 Date4 for each of the rows so rows would be equal to an array [], and rows[0] would be [3,3,4,6] and rows[1] would be [93.9,99,98.9,99]...

see JS Fiddle here http://jsfiddle.net/HLhT4/1/

$(function() {
  var $table = $("#work_table"),
      $headerCells = $table.find("th"),
      $rows = $table.find("tr tr");

  var headers = [],
      rows = [];

    $headerCells.each(function(k,v) {
     headers[headers.length] = $(this).text();
  });

  $rows.each(function(row,v) {
    $(this).find("td").each(function(cell,v) {
      if (typeof rows[cell] === 'undefined') rows[cell] = [];
      rows[cell][row] = $(this).text();
    });
  });

  console.log(headers);
  //console.log(rows);
  alert(headers);
  alert(rows);
});

I already have the headers.

Note: maybe I need to change the class and id attributes.

Answer 1

The problem is your markup and selector, A TR cannot have another tr as the child.

You need to use thead and tbody elements of table to group them like

<table id="work_table" border="2">
    <thead>
        <tr>
            <th>Service</th>
            <th>Measure</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Date3</th>
            <th>Date4</th>
            <th>Target</th>
            <th>Trend</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Service1</td>
            <td>KPI1</td>
            <td class="r1c1">3</td>
            <td class="r1c2">3</td>
            <td class="r1c3">4</td>
            <td class="r1c4">6</td>
            <td class="r1c5">5</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI2</td>
            <td class="r2c1" align="center">93.9</td>
            <td class="r2c2" align="center">99</td>
            <td class="r2c3" align="center">98.9</td>
            <td class="r2c4" align="center">99.0</td>
            <td class="r2c5" align="center">99</td>
            <!-- this will be fixed -->
            <td align="center"><span class="dynamicsparkline"> </span></td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI4</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Service2</td>
            <td>KPI1</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="5">Service3</td>
            <td>KPI1</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI4</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI5</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
</table>

then use .map() to get the result like

$(function () {
    var $table = $("#work_table"),
        $headerCells = $table.find("thead th"),
        $rows = $table.find("tbody tr");

    var headers, rows;

    headers = $headerCells.map(function (k, v) {
        return $.trim($(this).text())
    }).get();

    rows = $rows.map(function (row, v) {
        return [$(this).find("td:gt(-7):lt(-1)").map(function (cell, v) {
            return $.trim($(this).text());
        }).get()];
    }).get();

    console.log(JSON.stringify(headers));
    console.log(JSON.stringify(rows));
});

Demo: Fiddle

Answer 2

This part means find tr in tr witch is NOT what you want.

$rows = $table.find("tr tr");

Try this

$rows = $table.find("tr");

I updated your jsFiddle to show you.

Also, trying to log the table-row (tr) won't give you much result since it's "text-element" empty. You will have to traverse each tr and log each td.

I found this script on another SO question about traversing a table:

$(document).ready(function() {
    var rows = $('#mytab tbody >tr');
    var columns;
    for (var i = 0; i < rows.length; i++) {
        columns = $(rows[i]).find('td');
        for (var j = 0; j < columns.length; j++) {
            console.log($(columns[j]).html());
        }
    }
});

Hope this helps.