[英]Fill div content with array row data, selected by button click - only returning last row
我已經剝離了我所有的花里胡哨的頁面試圖讓它工作 - 我有5個按鈕和一個DIV。 該頁面從谷歌電子表格中讀取數據行並填充數組數據[]。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table']});
var i, j, x, k;
var data = new Array();
var headers = new Array();
var numRows, numCols;
function onldQuery() {
var url = 'http://spreadsheets.google.com/tq?key=xxxxxx&pub=0', query = new google.visualization.Query(url);
query.setQuery('SELECT * WHERE B != "" AND V> 0 ORDER BY V DESC LIMIT 20');
query.send(handleOnldResponse);
}
function handleOnldResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
console.log(numRows);
for (i = 0; i < numRows; i++) {
for (j = 0; j < numCols; j++) {
headers[j] = response.getDataTable().getColumnLabel(j);
data[i,j] = response.getDataTable().getValue(i, j);
console.log(data[i,j]);
}
}
loadData(0);
}
function loadData(x) {
console.log(x);
console.log(data[x,1]);
console.log(numCols);
$('#test_card').html("");
for (k = 0; k < numCols;k++) {
$('#test_card').html($('#test_card').html() + data[x,k] + "<br>");
}
}
</script>
</head>
<body onload="onldQuery()">
<button id="btn1" onclick="loadData(1);">1</button>
<button id="btn2" onclick="loadData(2);">2</button>
<button id="btn3" onclick="loadData(3);">3</button>
<button id="btn4" onclick="loadData(4);">4</button>
<button id="btn5" onclick="loadData(5);">5</button>
<div id="test_card">
</div>
</body>
</html>
它根據控制台轉儲正確地將data[]
加載到data[]
數組中,但我無法理解為什么它只在加載頁面時加載數組的最后一行數據,而b:嘗試加載不同的數據通過單擊其中一個按鈕進入DIV。
嘗試使用.append()
$('#test_card').append(data[x,k] + "<br>");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.