创建innerHTML的JavaScript循环（Google工作表）

我用谷歌表格作为我的资料来源来获取一些数据。我有三个类似的查询，但只有两个是返回结果，并在我的表单元格中工作。环顾四周后，我看到人们循环创建id=#以包含在他们的HTML中，但我不太明白用我的语法来实现这一点

这是我目前正在使用的（警告：前面没有代码）

load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（queryValue）；
函数查询值（）{
var query=new google.visualization.query（'https://spreadsheets.google.com/spreadsheet/tq?range=B22:B37&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=7');
query.send（函数（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var data=response.getDataTable（）；
//将范围B22:B37中的数据提取到范围“bx”中
//这些是日期标签
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）；
});
}
setOnLoadCallback（queryValue 1）；
函数queryValue1（）{
var query=new google.visualization.query（'https://spreadsheets.google.com/spreadsheet/tq?range=A22:A37&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=7');
query.send（函数（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var data1=response.getDataTable（）；
//将范围A22:A37中的数据提取到范围“bx”中
//这些是仪表顶部的标签，我想改变仪表范围的颜色。（即要进行循环，可以使用起点和终点，然后只需在代码中使用每个递增的值


由于您基本上是从
0
循环到
15
，因此开始将是
0
，包含的结束将是
15
。您的
ID
只是被
22
抵消，前面是
的“b”
，因此我们使用加法来抵消数字，并使用串联来连接
的“b”

for（var i=0；我知道for循环的概念吗？
<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);
});
}

for (var i = 0; i <= 15; i++) {
    document.getElementById('b' + (i + 22)).innerHTML = data.getValue(i, 0);
}