jquery根据数据库记录添加列(jquery adding columns based on database records)

编程入门 行业动态 更新时间:2024-10-28 13:28:58
jquery根据数据库记录添加列(jquery adding columns based on database records)

我有一个带有这些列的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"); }

I have an sqlite table with these columns: | date | weight | bmi | mood | etc.

I want a table on my html page to display like this on the html page:

<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>

so basically I'm flipping the rows and columns for display purposes. This is all so I can graph the table using jQuery Visualize plugin that goes out as the date progresses. As you can imagine, over time more entries will be made adding to the columns of the display table. Here is what I have been messing around with so far (not including the graphing scripts ). I've gotten myself totally confused and now I'm just a mess... Any suggestions would be a big help. I think I'm running into problems when trying to insert data into a table that's also trying to insert itself. I'm probably going about this wrong I bet. Thanks Mike

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"); }

最满意答案

可以肯定有人会回答这个问题,因为这似乎是许多人必须遇到的问题。 有点令人沮丧。 无论如何,我找到了一个答案,我可以在这里适应我自己的项目:

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.

Thought for sure someone would have answered this question as it seems like an issue lots of people must run into. A little discouraging. Anyway, I found an answer that I can adapt to my own project here:

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.

更多推荐

本文发布于:2023-07-30 03:38:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1322187.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数据库   adding   jquery   columns   records

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!