Question

我正在尝试在电子中重新创建由Lovasoa维护的令人敬畏的在线sqlite viewer，并且无法将返回的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表。我可以在javascript中看到在线slq.js程序看起来这样做的代码部分：

// 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的示例中分叉）here。谢谢您的帮助。

Answer 1

您可以简单地使用this之类的现有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：

$（＆＃39;＃演示表＆＃39;）simple_datagrid（）;

或者：

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

然后：

$('#demo-table').simple_datagrid(
{
   data: data
});

如何从SQL.JS返回的JSON数据创建HTML表？

1 个答案: