0

我正在尝试在电子中重新创建由 Lovasoa 维护的超棒的在线sqlite 查看器，并且无法将返回的 JSON 数据显示为 HTML 表。我正在处理的代码部分如下所示：

    $(document).ready(function(){
    //displays object as string                  
    var res = db.exec("SELECT * FROM lorem"); 
    document.getElementById('dbrows').innerHTML = JSON.stringify(res);

        //convert to table
        var tbl_body = "";
        var odd_even = false;
        $.each(res, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
     })
     tbl_body += "<tr class=\""+( odd_even ? "odd" :  "even")+"\">"+tbl_row+"</tr>";
    odd_even = !odd_even;               
  })
$("#table").html(tbl_body);
 });

我的桌子全都搞砸了。让我分解一下我正在尝试做的事情。

    var res = db.exec("SELECT * FROM lorem"); 
    document.getElementById('dbrows').innerHTML = JSON.stringify(res);

这部分代码完全按照 sql.js 文档的预期返回一个字符串。这是 github 上 sql.js README 中的相关代码。

    var res = db.exec("SELECT * FROM hello");
/*
[
    {columns:['a','b'], values:[[0,'hello'],[1,'world']]}
]
*/

我的问题是试图将该返回值放入一个漂亮的 html 表中。我可以在在线 slq.js 程序的 javascript 中看到似乎执行此操作的代码部分：

// Create an HTML table
var tableCreate = function () {
  function valconcat(vals, tagName) {
    if (vals.length === 0) return '';
    var open = '<'+tagName+'>', close='</'+tagName+'>';
    return open + vals.join(close + open) + close;
  }
  return function (columns, values){
    var tbl  = document.createElement('table');
    var html = '<thead>' + valconcat(columns, 'th') + '</thead>';
    var rows = values.map(function(v){ return valconcat(v, 'td'); });
    html += '<tbody>' + valconcat(rows, 'tr') + '</tbody>';
      tbl.innerHTML = html;
    return tbl;
  }
}();

但我不明白如何将它与文档中 db.exec 函数返回的任何内容联系起来。我对javascript很陌生，所以我想这对于有更多经验的人来说可能是一个明显的问题。我也一直在尝试使用 Cleric 示例中的代码（https://stackoverflow.com/a/10301494）。但是，我修改后的代码在一行中返回所有内容，并且没有将数据放在整齐的单独行中。这是我修改后的代码：

  $(document).ready(function(){
        //displays object as string                  
        var res = db.exec("SELECT * FROM lorem"); 
        document.getElementById('dbrows').innerHTML = JSON.stringify(res);  //just to prove the db.exec works. 

       //convert to table
        var tbl_body = "";
        var odd_even = false;
        $.each(res, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
    })
    tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
    odd_even = !odd_even;               
})
$("#table").html(tbl_body);
   });

可以在此处找到包含我的项目的存储库（来自 codewise 的示例）。谢谢您的帮助。

4

1 回答 1

0

jQuery您可以简单地使用现有插件之一，而不是做所有这些手动工作：

您也可以将它直接绑定到您的 ajax 调用源。

第 1 步- 包括javascript和css：

<script src="jquery.min.js"></script>
<script src="simple.datagrid.js"></script>
<link rel="stylesheet" href="simple.datagrid.css">

第 2 步- html：

<table id="demo-table" data-url="/fruit_data/">
  <thead>
    <tr>
      <th>Name</th>
      <th>Latin name</th>
    </tr>
  </thead>
</table>

第 3 步- javascript：

$('#demo-table').simple_datagrid();

或者：

var res = db.exec("SELECT * FROM hello");
var data = JSON.stringify(res);

接着：

$('#demo-table').simple_datagrid(
{
   data: data
});
于 2017-01-04T03:03:11.990 回答