Получите InnerText в HTML-ячейке таблицы и придайте ей форму, соответствующую API Google Chart

Question

Я пытаюсь получить значение ячейки таблицы с переменным числом строк (созданное из цикла while в php) и сформировать их так, чтобы они соответствовали API Google Chart.

Вот таблица:

<thead>
    <tr>
            <th>Sport/Month</th>
        <th>January</th>
        <th>February</th>
        <th>March</th>
    </tr> 
</thead>

<tbody>
    <tr>
        <td>Tennis</td>
        <td>Value Tennis.Jan</td>
        <td>Value Tennis.Feb</td>       
        <td>Value Tennis.Mar</td> 
    </tr>

    <tr>
        <td>Football</td>
        <td>Value Football.Jan</td>
        <td>Value Football.Feb</td>
        <td>Value Football.Mar</td> 
    </tr>

    <tr>
        <td>Sport_n</td>
        <td>Value Sport_n.Jan</td>
        <td>Value Sport_n.Feb</td>
        <td>Value sport_n.Mar</td>
    </tr>
</tbody>  

Я хотел бы сформировать это так:

[
      ['Sport/Month','Tennis','Football','Sport_n'],
      ['Jan',Value Tennis.Jan, Value Football.Jan, Value Sport_n.Jan],
      ['Feb',Value Tennis.Feb, Value Football.Feb, Value Sport_n.Feb],
      ['Mar',Value Tennis.Mar, Value Football.Mar, Value Sport_n.Mar]
    ]

Чтобы включить его в этот скрипт:

https://code.google.com/apis/ajax/playground/?type=visualization

Я попытался выбрать некоторый код отсюда, используя innerText и т.д.: Как получить значения из ячеек таблицы HTML, используя JavaScript

Но мои знания JS ограничены, поэтому я не мог получить то, что хотел бы...

Answer 1

Если вы хотите использовать JS, этот метод может помочь -

/**
 * Pass this method table element, if you table id "t", use this method like -
 * getJSONArrayFromTable(document.getElementById("t"))
 * 
 * @param tableElement
 * @returns {Array}
 */
function getJSONArrayFromTable(tableElement) {
    var json = [];
    var rows = [];

    Array.prototype.push.apply(rows, tableElement.tHead.rows);  
    for ( var i = 0; i < tableElement.tBodies.length; i++) {
        Array.prototype.push.apply(rows, tableElement.tBodies[i].rows);
    }

    for ( var i = 0; i < rows.length; i++) {
        json[i] = [];
        for ( var j = 0; j < rows[i].cells.length; j++) {
            json[i].push(rows[i].cells[j].innerHTML);
        }
    }
    return json;

}

Answer 2

Просто создайте массивы для каждого столбца, а затем превратите их в строки.

http://jsfiddle.net/N4Euz/

var $rows = $("table tr"),
    len = $rows.length,
    chartData = [],
    cols = [];


for(var i = 0; i < len; i++){
  cols[i] = [];
  for(var y = 0; y < len; y++){
      cols[i].push(
          $rows.eq(y).find("td,th").eq(i).text()
      );
  }
}

for(var i = 0; i < len; i++){
    chartData.push(
        cols[i]
    );
}

console.log(chartData);