遍歷表，並顯示爲谷歌圖

我需要一些數據從一個表，併成爲一個谷歌的圖表，但我得到通過它正確地失去了對如何循環遍歷表，並顯示爲谷歌圖

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

來源

2013-09-21 user537137

這應該主要是工作，如果'$ this'指的是你拉的錶行數據來自。從'.result'中提取數據會有點棘手，因爲您需要在不使用''的情況下捕獲數字。你也可以根據需要在數字上使用'parseInt'或'parseFloat'（否則它們會被解釋爲字符串）。 – asgallant

做這樣的：

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以確保它實際上是號碼被插入。

enter image description here

但是，它可能是更generalistic和可重複使用的，如果你有一個正確形成的表結構像

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

來源

2013-09-21 10:26:16 davidkonrad

遍歷表，並顯示爲谷歌圖

回答

相關問題