問題描述
用於創建 innerHTML 的 JavaScript 循環（Google 表格） (JavaScript loop to create innerHTML (Google Sheet))
I am grabbing some data using a Google Sheet as my source. I have three similar queries happening but only two are return results and working within my table cells. After looking around I see people looping to create the id=# to include in their HTML but I can't quite figure out the syntax to do this with mine.
Here is what I am currently using, (WARNING: Noobie Code Ahead)
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(queryValue);
function queryValue () {
var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B22:B37&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=7');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// fetch the data from range B22:B37 into the span "bx"
// These are date labels
document.getElementById('b22').innerHTML = data.getValue(0, 0);
document.getElementById('b23').innerHTML = data.getValue(1, 0);
document.getElementById('b24').innerHTML = data.getValue(2, 0);
document.getElementById('b25').innerHTML = data.getValue(3, 0);
document.getElementById('b26').innerHTML = data.getValue(4, 0);
document.getElementById('b27').innerHTML = data.getValue(5, 0);
document.getElementById('b28').innerHTML = data.getValue(6, 0);
document.getElementById('b29').innerHTML = data.getValue(7, 0);
document.getElementById('b30').innerHTML = data.getValue(8, 0);
document.getElementById('b31').innerHTML = data.getValue(9, 0);
document.getElementById('b32').innerHTML = data.getValue(10, 0);
document.getElementById('b33').innerHTML = data.getValue(11, 0);
document.getElementById('b34').innerHTML = data.getValue(12, 0);
document.getElementById('b35').innerHTML = data.getValue(13, 0);
document.getElementById('b36').innerHTML = data.getValue(14, 0);
document.getElementById('b37').innerHTML = data.getValue(15, 0);
});
}
google.setOnLoadCallback(queryValue1);
function queryValue1 () {
var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A22:A37&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=7');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
// fetch the data from range A22:A37 into the span "bx"
// These are the labels on the top of the gauges and I want to turn the color of the gauge range. (i.e. <70:red, 71‑89:yellow, 90‑100:red)
document.getElementById('a22').innerHTML = data1.getValue(0, 0);
document.getElementById('a23').innerHTML = data1.getValue(1, 0);
document.getElementById('a24').innerHTML = data1.getValue(2, 0);
document.getElementById('a25').innerHTML = data1.getValue(3, 0);
document.getElementById('a26').innerHTML = data1.getValue(4, 0);
document.getElementById('a27').innerHTML = data1.getValue(5, 0);
document.getElementById('a28').innerHTML = data1.getValue(6, 0);
document.getElementById('a29').innerHTML = data1.getValue(7, 0);
document.getElementById('a30').innerHTML = data1.getValue(8, 0);
document.getElementById('a31').innerHTML = data1.getValue(9, 0);
document.getElementById('a32').innerHTML = data1.getValue(10, 0);
document.getElementById('a33').innerHTML = data1.getValue(11, 0);
document.getElementById('a34').innerHTML = data1.getValue(12, 0);
document.getElementById('a35').innerHTML = data1.getValue(13, 0);
document.getElementById('a36').innerHTML = data1.getValue(14, 0);
document.getElementById('a37').innerHTML = data1.getValue(15, 0);
});
}
‑‑‑‑‑
參考解法
方法 1:
To do a loop, you can use a starting point, and an ending point, then simply use each incremented value in your code.
Since you're basically looping from 0 to 15, the start will be 0, and the inclusive end will be 15. Your ID is simply offset by 22 and preceded by "b", so we use addition to offset the number, and concatenation to join the "b".
for (var i = 0; i <= 15; i++) {
document.getElementById('b' + (i + 22)).innerHTML = data.getValue(i, 0);
}
(by Dave Lalande、the system)