Question

我这里有这个代码，它可以从数据库中的值生成一个列表。问题是它只显示1列。如何通过更正此代码在列表中显示2列？

所需的显示：

   (from column1)   (from column2)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)

代码:( fldBookTitle是列名，第二个是fldBookAuthor）

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("ul");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("li");
                        listItem.innerHTML = results.rows.item(i).fldBookTitle;
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }

感谢您的帮助。

Answer 1

如果您要查找多个列，则表格似乎比ul更合适。否则，您可以将两个项目添加到每一行（li），但第二个值不会像列一样垂直匹配。

Answer 2

您最好的选择（除了表格）将使用字典列表dl。字典列表中的每个项目都有一个字典术语dt和一个字典定义dd。

Answer 3

这应该这样做。它创建一个包含表行和两列的表。

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("table");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("tr");
                        var titleItem = document.createElement("td").innerHTML = results.rows.item(i).fldBookTitle;
                        var authorItem = document.createElement("td").innerHTML = results.rows.item(i).fldBookAuthor;
                        listItem.appendChild(titleItem);
                        listItem.appendChild(authorItem);
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }

第二个解决方案

function listBooks(){
            db.transaction(function (tx){
                tx.executeSql('SELECT * FROM tblBooks', [],          function(tx, results){
                    var len = results.rows.length, i;
                    var listContainer = document.createElement("div");
                    document.getElementsByTagName("body")[0].appendChild(listContainer);
                    var listElement = document.createElement("ul");
                    listContainer.appendChild(listElement);
                    for(i=0;i<len;++i){
                        var listItem = document.createElement("li");
                        listItem.innerHTML = results.rows.item(i).fldBookTitle + " " + results.rows.item(i).fldBookAuthor;
                        listElement.appendChild(listItem);
                    }   

                });
                //console.log("table created");
            });



        }

innerHTML显示2列

3 个答案: