jquery基于数据库记录添加列

yautem 发布于 2019-03-09 html 最后更新 2019-03-09 14:34 0 浏览

我有一个SQLite表与这些列: |日期|重量| bmi |心情|等等 我想在我的html页面上的一个表格在html页面上显示如下:

<table>
    <caption></caption>
    <thead>
         <tr>
               <td>(empty cell over row headings)</td>
               Additional tH's as needed (this is where each date entry goes)
         </tr>
    </thead>
    <tbody>
         <tr>
               <th scope="row">Weight</th>
               additional tD's as needed (this is where each weight entry goes matched with date in column heading)
         </tr>
         <tr>
               <th scope="row">BMI</th>
               additional tD's as needed (same as above)
         </tr>
    </tbody>
</table>
所以基本上我翻动行和列出于显示目的。这一切都可以使用jQuery Visualize插件在日期推进时熄灭。正如你所想象的那样,随着时间的推移,更多的条目将被添加到显示表的列中。这是我迄今一直在搞的(不包括图表脚本)。我已经完全糊涂了,现在我只是一团糟...... 任何建议将是一个很大的帮助。当我尝试将数据插入一个也试图插入数据的表中时,我想我遇到了问题。我可能会打赌这个错误。 谢谢 麦克风
function homeSuccess(tx, results) {
    // Gets initial count of records in table...
    var entries = results.rows.length;
    // Iterates over all the existing records...
    for (var i = 0; i < entries; ++i) {
        // The following element id's can be found in the div's within the table below, see element.innerHTML line...
        var element = document.getElementById('colDate');
        element.innerHTML += '<th scope="col">' + results.rows.item(i).timeStamp + '</th>';
        var element2 = document.getElementById('tdWeight');
        element2.innerHTML += '<td>' + results.rows.item(i).weight + '</td>';
        var element3 = document.getElementById('tdBmi');
        element3.innerHTML += '<td>' + results.rows.item(i).bmi + '</td>';
    };
    // 'screenView2 is a placeholder on the main html page...
    var element = document.getElementById('screenView2');
    element.innerHTML = '<br /><br /><h1>Data:</h1><br />Number of entries: ' + entries + '<br />' + '<table><caption>Mikes Health</caption><thead><tr><td></td><div id="colDate"></div></tr></thead><tbody><tr><th scope="row">Weight</th><div id="colWeight"></div></tr><tr><th scope="row">BMI</th><div id="colBmi"></div></tr></tbody></table>';
// This section is just a test trying to plug in static elements prior to trying database data... When using this section I had the iteration section commented out.
    var element2 = document.getElementById('colDate');
    element2.innerHTML = '<th scope="col">4-1-13</th>';
var element3 = document.getElementById('colWeight');
    element3.innerHTML = '<td scope="col">123</td>';
var element4 = document.getElementById('colBmi');
    element4.innerHTML = '<td scope="col">321</td>';
}
function homeQuery(tx) {
    console.log("entering homeQuery");
    tx.executeSql('SELECT * FROM HEALTHGRAPH', [], homeSuccess, onSqlError);
    console.log("leaving homeQuery");
}
// Function that is called on initial page load 
function homeDBopen() {
    console.log("opening db for home data");
    theDB = window.openDatabase("hgDB", "1.0", "HealthGraph", 3 * 1024 * 1024);
    theDB.transaction(homeQuery, onTxError, onTxSuccess);
    console.log("leaving homeDBopen");
}
已邀请:

oad

赞同来自:

可以肯定有人会回答这个问题,因为这似乎是许多人必须遇到的问题。有点令人沮丧。无论如何,我找到了一个答案,我可以在这里适应我自己的项目: http://msdn.microsoft.com/en-us/library/ie/ms532998(v=vs.85).aspx

// Insert cells into the header row.
  for (i=0; i<heading.length; i++)
  {
    oCell = oRow.insertCell(-1);... etc.