Javascript WebSQL：按列排序并打印关联行

我有一个小型SQL数据库，如下所示：

id        name      category
------------------------------
1         name1     category1
2         name2     category2
3         name3     category1
4         name4     category1

<ul>
    <li>category1
        <ul>
            <li>name1</li>
            <li>name3</li>
            <li>name4</li>
        </ul>
    </li>
    <li>category2
        <ul>
            <li>name2</li>
        </ul>
    </li>
</ul>

我想用javascript和html格式化数据库，如下所示：

id        name      category
------------------------------
1         name1     category1
2         name2     category2
3         name3     category1
4         name4     category1

<ul>
    <li>category1
        <ul>
            <li>name1</li>
            <li>name3</li>
            <li>name4</li>
        </ul>
    </li>
    <li>category2
        <ul>
            <li>name2</li>
        </ul>
    </li>
</ul>

当然可以“嵌套SQL执行”，只需将第二个查询放在第一个查询的成功回调中。但这可以通过一个查询完成

db.事务（功能（tx）{
//查询（可能需要添加一些ORDERBY子句）
//根据建议更新为包含nameurl列
tx.executeSql（'从列表中选择类别、名称、名称URL'，[]，函数（tx，结果）{
//根据类别对结果进行分组
var={}；
如果（results.rows.length>0）{
对于（var i=0；results.rows.length>i；i++）{
var记录=结果行项目（i）；
如果（！（分组中的record.category））{
分组[记录.类别]=[]；
}
已分组[记录.类别].推送({
name:record.name，
nameurl:record.nameurl
});
}
}
//从类别和名称构建树
var$tree=$（“
”）；
$。每个（分组、功能（类别、记录）{
变量$leaves=$（“
”）；
$。每个（记录，功能（ix，记录）{
变量$leaf=$（'
'）；
变量$leaflink=$（''{
text:record.name，
href:record.nameurl
});
$leaf.append（$leaflink）；
$leaves.append（$leaf）；
});
变量$branch=$（“
”{
文本：类别
});
$branch.append（$leaves）；
$tree.append（$branch）；
});
//将树插入页面
$（document.body）.append（$tree）；
});
});

非常感谢DCoder，您的解决方案非常有效！因为我想知道如何使用第二个查询来完成它，所以我想尝试一下（请参见编辑）。我犯了什么错误？ThanksWebSQL异步运行，如果一次发出多个查询，结果回调将按引擎希望的任何顺序触发。如果您想要结果的特定顺序，您必须自己实现它，在以前的所有查询都返回结果之前不触发新查询。很抱歉再次打扰您，但是您能告诉我如何在名称旁边存储第二个变量（例如，对于url友好格式的名称url）。谢谢，太棒了，再次谢谢。它就像一个符咒——我今天学到了很多：）@DCoder需要帮助。。我没有使用webSQl从数据库中获取任何数据