javascript - 循环遍历表格并显示为 Google 图表

Question

我需要从表格中获取一些数据并进入谷歌图表，但我迷失了如何正确循环它

HTML

<tr>
    <th>Date</th>
    <th>Score</th>
    <th>Result</th>
</tr>

    <tr>
        <td class="date">24/12/2012</td>
        <td class="score">51</td>
        <td class="result">30<span class="over"></span></td>
    </tr>

    <tr>
        <td class="date">28/12/2012</td>
        <td class="score">52</td>
        <td class="result">31<span class="over"></span></td>
    </tr>

    <tr>
        <td class="date">02/12/2012</td>
        <td class="score">44</td>
        <td class="result">19<span class="over"></span></td>
    </tr>

这是谷歌图表javascript

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Score', 'Result'],
      [date,  score,      result],
    ]);

我猜我需要这样的东西......

  var date = $this.find(".date").html();
  var score = $this.find(".score").html();
  var result = $this.find(".result").html();

Answer 1

像这样做 ：

var data = new google.visualization.DataTable();
data.addColumn('string','Date');
data.addColumn('number','Score');
data.addColumn('number','Result');

$('table tr').not(':first').each(function(i,tr) {
   data.addRow([
      $(tr).find('.date').text(),
      parseInt($(tr).find('.score').text()),
      parseInt($(tr).find('.result').text())
   ]);
});

我们知道列名，因此可以对其进行硬编码。在循环中提取数据。列数据通过类名找到，但您也可以使用索引。注意parseInt确保它实际上是插入的数字。

但是，如果您有一个正确的表格结构，例如

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>