调用Javascript函数获取sql查询的结果集并将其打印到html表中

我正在使用Phonegap和jquery-Mobile-1.4.5创建一个跨平台应用程序。由于我是一名Java开发人员，Java脚本对我来说是一个非常新的概念。 我正在创建一个简单的应用程序，其中有一个html表，我想在其中显示来自数据库表的select查询。从中，我发现了如何向函数发送回调。 但我的问题是

onload未调用我的showContactresultSet函数

如何在标记中打印结果集，我不想在showContactresultSet函数中使用javascript连接

我的index.html文件的一部分

<table data-role="table" id="table-custom-2"  onload="showContact(resultSet)" >
            <thead>
                <tr class="ui-bar-d">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>

                <!--Print the resultSet data with a for loop here-->
            </tbody>

        </table>

我的javascript代码

function showContact(resultSet){

             var db= window.openDatabase("appDb","1.0","appDb",200000);

                selectRow("SELECT * FROM contact;", function(resultSet) {
                    console.log(resultSet);

                //Don't want to access the <table> from here
                  });
        }

        /** Select Row from Table **/ 
        function selectRow(query, callBack){ 
           var result = [];
           db.transaction(function (tx) {
              tx.executeSql(query, [], function(tx, rs){
                 for(var i=0; i<rs.rows.length; i++) {
                    var row = rs.rows.item(i)
                    result[i] = { id: row['id'],
                                  name: row['name'],
                                  number: row['number']
                    }
                 }
                 callBack(result); 
              }, errorHandler);
           });
        } 

---

您可以将从DB获得的数据框放到一个表行中，并将其分配给表体。参见下面的代码

加载页面时，可以调用函数selectrow

<table data-role="table" id="table-custom-2">
<thead>
    <tr class="ui-bar-d">
        <th>Id</th>
        <th>Name</th>
        <th>Number</th>
    </tr>
</thead>
<tbody id="contactlist">
<!--Print the resultSet data with a for loop here-->
</tbody>
</table>

<script>
$(document).ready(function($) {
    var db= window.openDatabase("appDb","1.0","appDb",200000);
    selectrow();
}); 

function selectrow(){
    db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM contact", [], function(tx, rs){
            var output = '';
            for(var i=0; i<rs.rows.length; i++) {
                var row = rs.rows.item(i)
                output += '<tr><td>' + row['id'] + '</td><td>' + row['name'] + '</td><td>' + row['number'] + '</td></tr>';
            }
            $('#contactlist').html(output);

        }, errorHandler);
    });
}
</script>

---

您可以使用类似mustache的模板系统将javascript对象呈现为html代码1：在控制台日志中查找错误以进行故障排除。也不要考虑在OnLoad中调用，而是使用ADDeVistListEnter。对于2：您需要使用@EmanuelRalha建议的模板解决方案，或者使用JavaScript DOM API（例如createElement、createTextNode和insertAfter）来构建表行并将它们附加到tbody中。DOM API有点难以适应，但如果您在Java中使用过XML文档，则概念是类似的。@帕尔帕蒂姆：谢谢，您能否给出一个示例，说明如何在此场景中调用addEventListener为保持整洁，请重构showContact以不获取参数，而是在调用时检索它。然后你可以在你的脚本代码中有这个：document.getElementById'table-custom-2'。addEventListener'load'，showContact；顺便说一句，由于您从未显示resultSet的来源，这也可能是bug的来源。确保在调用ShowContactThank时知道它已初始化，但您可能没有领会我的真正意思，我不想在内部使用串联selectRow@Nusrat在这种情况下，您可以使用Angular JS传递在selectrow函数中获得的数据，并构建联系人列表。