SQL.JS에서 반환 된 JSON 데이터에서 HTML 테이블을 만들려면 어떻게해야합니까?

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 테이블로 가져 오려고합니다. 온라인 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 함수에 의해 반환 아무것도 이것을 연결하는 방법을 이해하지 않습니다 문서에서. 나는 자바 스크립트가 너무 새로워서 더 많은 경험을 가진 사람에게 분명한 문제가 될 수 있다고 상상한다. 나는 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 플러그인 중 하나를 사용할 수 있습니다

당신은뿐만 아니라 당신의 아약스 호출 소스에 직접 바인딩 할 수 있습니다.

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 단계 - 자바 스크립트 :

$ ('# 데모 테이블 '). mple_datagrid();

또는 : 다음

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

그리고 :

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