Question

我已经剥离了我所有的花里胡哨的页面试图让它工作 - 我有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[]数组中，但我无法理解为什么它只在加载页面时加载数组的最后一行数据，而b：尝试通过单击其中一个按钮将不同的行加载到DIV中。

Answer 1

尝试使用.append（）

$('#test_card').append(data[x,k] + "<br>");

使用按钮单击选择的数组行数据填充div内容 - 仅返回最后一行

1 个答案: