在html表格单元格中获取InnerText，并将其整形为适合GoogleChartneneneba API

Get InnerText in html table cell and shape it to fit Google Chart API

本文关键字：API GoogleChartneneneba 单元格 表格 html 获取 InnerText      更新时间：2023-09-26

我试图获取一个具有不同行数的表的单元格值（从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等从这里挑选一些代码：如何从HTML表中获取值'；s使用JavaScript 的单元格

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

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

只需为每列创建数组，然后将它们转换为行。

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);
相关文章：