[英]innerHTML display 2 columns
I have this code here where it can generate a list from the values in the database. 我在这里有此代码,它可以从数据库中的值生成列表。 The problem is it only displays 1 column.
问题是它仅显示1列。 How can I display 2 columns in a list by correcting this code?
如何通过更正此代码在列表中显示2列?
desired display: 所需的显示:
(from column1) (from column2)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)
○ (some booktitle) (some bookauthor)
code: (fldBookTitle is the Column name and the second is fldBookAuthor) 代码:(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");
});
}
thanks for any help. 谢谢你的帮助。
If you are looking for more than one column, a table seems more appropriate than a ul. 如果要查找多个列,则表似乎比ul更合适。 Otherwise you can add both items to each row (li) but the second values won't reliably match up vertically like a column.
否则,您可以将这两项都添加到每一行(li),但第二个值将无法像列那样垂直可靠地匹配。
Your best bet (other than a table) would be to use a dictionary list dl
. 最好的选择(除桌子以外)是使用字典列表
dl
。 Each item in a dictionary list has a dictionary term dt
and a dictionary definition dd
. 词典列表中的每个项目都有一个词典术语
dt
和一个词典定义dd
。
This should do it. 这应该做。 It creates a table with table rows and two columns.
它创建一个具有表行和两列的表。
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");
});
}
Second solution 第二解决方案
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");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.