web sql 编辑留言板信息
js代码：
// JavaScript Document
function getE(ele) {
return document.getElementById(ele);
}
var datalist = getE('datalist');
var result = getE('result');
var db = openDatabase('myData', '1.0', 'test database', 1024 * 1024);
if (!datalist) {
datalist = document.createElement('dl');
datalist.className = 'datalist';
datalist.id = 'datalist';
document.getElementById("mr-cont").appendChild(datalist);
}
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []);
})
getE('clear').onclick = function () {//删除留言信息
db.transaction(function (tx) {
tx.executeSql('DROP TABLE MsgData', []);
})
showAllData();
}
getE('save').onclick = function () {//调用保存信息
saveData();
return false;
}
function removeAllData() {//从数据库中删除
for (var i = datalist.children.length - 1; i >= 0; i--) {
datalist.removeChild(datalist.children[i]);
}
}
function showData(row) {//在HTML页面中展示留言信息
var dt = document.createElement('dt');
dt.innerHTML = row.name;
var dd = document.createElement('dd');
dd.innerHTML = row.msg;
var tt = document.createElement('tt');
var t = new Date();
t.setTime(row.time);
tt.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();
datalist.appendChild(dt);
datalist.appendChild(dd);
datalist.appendChild(tt);
}
function showAllData() {//从数据库中提取留言信息
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []);
tx.executeSql('SELECT * FROM MsgData', [], function (tx, result) {
removeAllData();
for (var i = 0; i < result.rows.length; i++) {
showData(result.rows.item(i));
}
});
});
}
function addData(name, msg, time) {//向数据库中添加数据
db.transaction(function (tx) {
tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)', [name, msg, time], function (tx, result) {
alert("留言成功");
},
function (tx, error) {//添加失败提示
alert(error.source + ':' + error.message);
});
});
}
function saveData() {//获取HTML中的数据
var name = getE('name').value;
var msg = getE('msg').value;
var time = new Date().getTime();
addData(name, msg, time);
showAllData();
}html代码：
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>用户登录界面</title> <link href="css/css.css" rel="stylesheet" type="text/css"> <body onLoad="showAllData();"> <div class="mr-cont" id="mr-cont"> <form action="#" method="get" accept-charset="utf-8"> <p class="form_item"> 用户名： <input type="text" id="name" required/> </p> <p class="form_item"> 留 言： <textarea type="text" rows="10" cols="30" id="msg" required></textarea> </p> <p class="form_item"> <input type="submit" id="save" value="保存"/> <input type="submit" id="clear" value="删除"/> </p> <hr><br/> </form> </div> <script type="text/javascript" src="js/js.js"></script> </body> </html>
好的，我来逐行讲解这些代码，并特别说明 datalist 是谁以及删除逻辑。
一、JS 代码逐行讲解
1. 工具函数
javascript
function getE(ele) {
return document.getElementById(ele);}这是一个简单的辅助函数，通过 ID 获取 DOM 元素，简化代码书写。
2. 获取元素
javascript
var datalist = getE('datalist');var result = getE('result');datalist：尝试获取 ID 为datalist的元素。result：尝试获取 ID 为result的元素（但后续代码中并未使用这个变量）。
3. 连接数据库
javascript
var db = openDatabase('myData', '1.0', 'test database', 1024 * 1024);这是 Web SQL Database（已废弃，但用于教学）的 API。
打开名为
myData的数据库，版本1.0，描述为test database，大小限制为 1MB。
4. 如果 datalist 不存在，则创建
javascript
if (!datalist) {
datalist = document.createElement('dl');
datalist.className = 'datalist';
datalist.id = 'datalist';
document.getElementById("mr-cont").appendChild(datalist);}如果页面上没有 ID 为
datalist的元素，则动态创建一个<dl>（定义列表）元素。设置它的 class 为
datalist，id 为datalist。然后将它添加到 ID 为
mr-cont的元素内部（这个元素在 HTML 中存在，是留言区域的容器）。
这里回答你的问题：datalist 是谁？datalist 是一个 <dl>（定义列表）元素，用于在页面上显示留言列表。每条留言包含：
<dt>：留言人姓名<dd>：留言内容<tt>：留言时间
5. 创建数据表
javascript
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []);})启动一个数据库事务。
创建名为
MsgData的表（如果不存在），包含三个字段：name：文本类型，存储用户名msg：文本类型，存储留言内容time：整数类型，存储时间戳
6. "删除"按钮的点击事件
javascript
getE('clear').onclick = function () {//删除留言信息
db.transaction(function (tx) {
tx.executeSql('DROP TABLE MsgData', []);
})
showAllData();}获取 ID 为
clear的按钮（HTML 中有一个 value="删除" 的按钮）。点击时：
执行 SQL 语句
DROP TABLE MsgData，删除整个数据表（所有留言数据永久丢失）。调用
showAllData()刷新页面显示（因为表被删了，显示会变空）。
7. "保存"按钮的点击事件
javascript
getE('save').onclick = function () {//调用保存信息
saveData();
return false;}获取 ID 为
save的按钮（HTML 中有一个 value="保存" 的按钮）。点击时调用
saveData()函数保存留言。return false阻止表单的默认提交行为（防止页面刷新）。
8. removeAllData() 函数 - 删除页面上的所有留言显示
javascript
function removeAllData() {//从数据库中删除
for (var i = datalist.children.length - 1; i >= 0; i--) {
datalist.removeChild(datalist.children[i]);
}}这是你重点问的函数，删除逻辑如下：
datalist.children：获取<dl>元素下的所有子元素（即所有留言的<dt>、<dd>、<tt>）。datalist.children.length - 1：最后一个子元素的索引。倒序循环（从最后一个开始删）：
datalist.removeChild(datalist.children[i])：删除当前索引的子元素。为什么要倒序？
如果正序删除（从索引 0 开始），每删一个，后面的子元素索引会前移，导致漏删或出错。倒序删除则安全。
注意：注释写的是"从数据库中删除"，但实际上这个函数只删除页面上的 DOM 元素，不操作数据库。
真正删除数据库的是上面"删除"按钮的 DROP TABLE。
9. showData(row) - 在页面上显示一条留言
javascript
function showData(row) {//在HTML页面中展示留言信息
var dt = document.createElement('dt');
dt.innerHTML = row.name;
var dd = document.createElement('dd');
dd.innerHTML = row.msg;
var tt = document.createElement('tt');
var t = new Date();
t.setTime(row.time);
tt.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();
datalist.appendChild(dt);
datalist.appendChild(dd);
datalist.appendChild(tt);}创建
<dt>元素，显示留言人姓名。创建
<dd>元素，显示留言内容。创建
<tt>元素，显示留言时间（将时间戳转为本地日期时间字符串）。将这三个元素依次添加到
datalist（<dl>）中。
10. showAllData() - 从数据库读取并显示所有留言
javascript
function showAllData() {//从数据库中提取留言信息
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)', []);
tx.executeSql('SELECT * FROM MsgData', [], function (tx, result) {
removeAllData(); // 先清空页面显示
for (var i = 0; i < result.rows.length; i++) {
showData(result.rows.item(i)); // 逐条显示留言
}
});
});}开启事务，确保表存在。
查询
MsgData表中的所有记录。查询成功后：
调用
removeAllData()清空当前页面上的留言列表。循环遍历查询结果，每条记录调用
showData()在页面上显示。
11. addData() - 向数据库添加数据
javascript
function addData(name, msg, time) {//向数据库中添加数据
db.transaction(function (tx) {
tx.executeSql('INSERT INTO MsgData VALUES(?,?,?)', [name, msg, time], function (tx, result) {
alert("留言成功");
},
function (tx, error) {//添加失败提示
alert(error.source + ':' + error.message);
});
});}使用参数化查询插入一条留言记录。
成功时弹出"留言成功"。
失败时显示错误信息。
12. saveData() - 获取表单数据并保存
javascript
function saveData() {//获取HTML中的数据
var name = getE('name').value;
var msg = getE('msg').value;
var time = new Date().getTime();
addData(name, msg, time);
showAllData();}获取用户名输入框（id="name"）的值。
获取留言内容输入框（id="msg"）的值。
获取当前时间戳（毫秒）。
调用
addData()存入数据库。调用
showAllData()刷新页面显示。
二、HTML 代码逐行讲解
html
<!DOCTYPE html>
声明 HTML5 文档类型。
html
<head><meta charset="UTF-8"><title>用户登录界面</title><link href="css/css.css" rel="stylesheet" type="text/css">
设置字符编码为 UTF-8。
页面标题"用户登录界面"（实际是留言板）。
引入外部 CSS 样式文件。
html
<body onLoad="showAllData();">
页面加载完成后执行
showAllData()，从数据库读取留言并显示。
html
<div class="mr-cont" id="mr-cont">
留言区域的容器，id 为
mr-cont，如果datalist不存在，JS 会动态创建并追加到这个容器中。
html
<form action="#" method="get" accept-charset="utf-8">
表单，提交地址为当前页（
#），GET 方式。
html
<p class="form_item"> 用户名： <input type="text" id="name" required/></p><p class="form_item"> 留 言： <textarea type="text" rows="10" cols="30" id="msg" required></textarea></p><p class="form_item"> <input type="submit" id="save" value="保存"/> <input type="submit" id="clear" value="删除"/></p><hr><br/></form>
用户名输入框，id="name"，必填。
留言文本域，id="msg"，必填。
两个提交按钮：保存和删除。
required属性表示必须填写才能提交（但 JS 的return false阻止了实际提交）。
html
</div><script type="text/javascript" src="js/js.js"></script></body></html>
容器结束。
引入外部 JS 文件（就是上面讲解的那些代码）。
页面结束。
三、总结：datalist 和删除逻辑
datalist 是谁？
datalist 是一个动态创建或已存在的 <dl> 元素，位于 <div id="mr-cont"> 中，用于展示留言列表。
每条留言包含三个子元素：<dt>（姓名）、<dd>（内容）、<tt>（时间）。
删除逻辑是什么？
有两处删除：
删除页面显示（
removeAllData()）倒序遍历
datalist的所有子元素并移除。只影响页面显示，不影响数据库。
删除数据库数据（"删除"按钮）
执行
DROP TABLE MsgData，删除整个表（所有数据永久丢失）。然后调用
showAllData()刷新页面（此时表已空，页面为空）。
注意：注释中 removeAllData() 写的是"从数据库中删除"并不准确，它只是清空页面。真正的数据库删除是"删除"按钮的 DROP TABLE。