循环显示表格并显示为Google Chart

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>