javascript - 在 html 表格单元格中获取 InnerText 并将其调整为适合 Google Chart API

Question

我尝试获取具有不同行数的表的单元格值（从 php 中的“while”循环生成）并对其进行整形以适应 Google Chart API。

这是表格：

<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#line_chart

我试图从这里选择一些代码，使用 innerText 等：How to grab the values from an HTML table's cells using JavaScript

但是我的JS知识有限，所以我无法达到我想要的......

Answer 1

只需为每一列创建数组，然后将它们变成行。

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);

Answer 2

如果你想使用 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;

}