求大神指教，出什么问提了，总是语法错误，该改的都改了还是不行
<!doctype html>
<html>
<head>
<style>
body {
color: #333;
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
}
div,tbody,tr,td,input,ul,li,p { margin: 0; padding: 0; }
table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
border-color: gray;
}
li { list-style: none; }
a { color: #005eac; text-decoration: none; }
img { border: none; }
.clearfix { display: block; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.comment-box{
width:500px;
border:1px solid #3879D9;
border-radius:5px;
padding:2px;
box-shadow: 0 0 5px #3879D9 inset;
}
.comment-box_2 {
padding: 10px 10px 5px;
background: #f0f5f8;
}
textarea {
width: 98%;
height: 23px;
padding: 3px;
border: 1px solid #bcc7d8;
margin-bottom: 5px;
overflow: auto;
font-size: 12px;
}
.input-button, .input-submit {
background-color: #005eac;
border-width: 1px;
border-style: solid;
border-color: #b8d4e8 #124680 #124680 #b8d4e8;
color: #fff;
cursor: pointer;
font-size: 12px;
padding: 2px 15px;
overflow: visible;
float:right;
}
.comment-box .content { padding: 0 10px; }
.comment-list .comment { word-wrap: break-word; }
.comment-list .avatar { float: left; }
.comment-list li {
padding: 5px 0;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
.content .s_3 { margin: 0 40px 0 60px; }
.comment-list .p_1 { margin-bottom: 5px; }
.comment-list .date { color: #999; margin-left: 10px; }
.content .s_4 {
float: right;
color: #999;
margin-left: 10px;
}
span.tip{color:Red;display:none;}
</style>
</head>
<body>
<header><h2>开发一个离线留言网页</h2></header>
<div class="comment-box">
<div class="comment-box_2 clearfix">
<table>
<tr>
<td style="width: 60px;vertical-align: top;">
<img height="50" width="50" src="../images/comment/men_tiny.gif">
</td>
<td>
<textarea placeholder="请输入留言"></textarea>
<div>
<span class="tip">请填写留言内容</span>
<input type="button" value="留 言" class="input-button">
</div>
</td>
</tr>
</table>
</div>
<div class="content">
<ul class="comment-list">
<script id="J_item" type="text/x-html5-tmpl">
<img class="avatar" height="50" width="50" src="../images/comment/{img}.jpg">
<a class="s_4" href="#">举报</a>
<div class="s_3">
<p class="p_1"><a class="user" target="blank">{name}</a><span class="date">{date}</span></p>
<p class="comment"><span>{content}</span></p>
</div>
</script>
</ul>
</div>
</div>
</body>
<script>
//请参考实验报告补齐此段代码！
var DB_NAME = 'html5_storage_form_comment'; // 数据库和表名
var substitute = function (str, sub) { // 字符串格式化函数
return str.replace(/\{(.+?)\}/g, function ($0, $1) {
return $1 in sub ? sub[$1] : $0;
});
};
var comment_list = document.querySelector('ul.comment-list'),
first_item_el = document.getElementById('J_item'),
item_tpl = first_item_el.innerHTML,
submit_btn = document.querySelector('input[type="button"]'),
textarea_el = document.querySelector('textarea'),
tip_el = document.querySelector('span.tip'),
storageDriver = window.openDatabase(DB_NAME, '1.0', 'html5 storage comment', 1048576);
function build_item(data){
var li = document.creataElment('li');
li.className = 'clearfix';
li.innerHTML = substitute(item_tpl,data);
li.setAttribute('data_id',data.id);
comment_list.insertBefore(li,first_item_el);
};
function store_data(data){
storageDriver.transaction(function(t){//往数据库插入一条数据
t.executeSql("INSERT INTO" + DB_NAME + "(img,name,data,content)VALUES(?,?,?,?);",
[data.img,data.name,data.data,data.content],//传入保存数据
function(transaction,resultSet){
data.id = resultSet.insertId;//获取数据库返回的自增ID
build_item(data);
textarea_el.value = '';
},function(transaction,error){ show_error_tip(error.message);});//错误回调函数
});
};
function show_error_tip(msg){
tip_el.style.display = 'inline';
tip_el.innerHTML = msg;
setTimeout(function(){
tip_el.style.display = 'none';
},1500);
};
submit_btn.addEventListener('click',function(e){
e.preventDefault();
var content = textarea_el.value.trim();
if (content.length) {
store_data({
img:(new Date().getTime())%5,
name: '陌生人'+(new Date().getTime())%5,
data: new Date().toLocaleString(),
content: content
});
}else{
show_error_tip('请填写留言内容');
};
},false);
storageDriver.transaction(function(t){//启动一个事务生产列表
t.executeSql("CREATE TABLE IF NOT EXISTS" + DB_NAME +//创建数据表
"(id INTEGER PRIMARY KEY AUTOINCREMENT,"+//自增字段
"name TEXT NOT NULL,"+//姓名字段
"data TEXT NOT NULL,"+//时间字段
"content TEXT NOT NULL,"+//内容字段
"img INTEGER DEFAULT 1)");//照片字段
t.executeSql("SELECT*FROM" + DB_NAME,[],//读物数据表
function(t,results){
for(var i = 0,l=results.rows.length;i<l;i++){
build_item(results.rows.item(i));
};
});
//t.executeSql("drop table" + DB_NAME);
});
</script>
</html>
128行代码
var li = document.createElement('li');<!doctype html>
<html>
<head>
<style>
body {
color: #333;
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
}
div,tbody,tr,td,input,ul,li,p { margin: 0; padding: 0; }
table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
border-color: gray;
}
li { list-style: none; }
a { color: #005eac; text-decoration: none; }
img { border: none; }
.clearfix { display: block; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.comment-box{
width:500px;
border:1px solid #3879D9;
border-radius:5px;
padding:2px;
box-shadow: 0 0 5px #3879D9 inset;
}
.comment-box_2 {
padding: 10px 10px 5px;
background: #f0f5f8;
}
textarea {
width: 98%;
height: 23px;
padding: 3px;
border: 1px solid #bcc7d8;
margin-bottom: 5px;
overflow: auto;
font-size: 12px;
}
.input-button, .input-submit {
background-color: #005eac;
border-width: 1px;
border-style: solid;
border-color: #b8d4e8 #124680 #124680 #b8d4e8;
color: #fff;
cursor: pointer;
font-size: 12px;
padding: 2px 15px;
overflow: visible;
float:right;
}
.comment-box .content { padding: 0 10px; }
.comment-list .comment { word-wrap: break-word; }
.comment-list .avatar { float: left; }
.comment-list li {
padding: 5px 0;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
.content .s_3 { margin: 0 40px 0 60px; }
.comment-list .p_1 { margin-bottom: 5px; }
.comment-list .date { color: #999; margin-left: 10px; }
.content .s_4 {
float: right;
color: #999;
margin-left: 10px;
}
span.tip{color:Red;display:none;}
</style>
</head>
<body>
<header><h2>开发一个离线留言网页</h2></header>
<div class="comment-box">
<div class="comment-box_2 clearfix">
<table>
<tr>
<td style="width: 60px;vertical-align: top;">
<img height="50" width="50" src="../images/comment/men_tiny.gif">
</td>
<td>
<textarea placeholder="请输入留言"></textarea>
<div>
<span class="tip">请填写留言内容</span>
<input type="button" value="留 言" class="input-button">
</div>
</td>
</tr>
</table>
</div>
<div class="content">
<ul class="comment-list">
<script id="J_item" type="text/x-html5-tmpl">
<img class="avatar" height="50" width="50" src="../images/comment/{img}.jpg">
<a class="s_4" href="#">举报</a>
<div class="s_3">
<p class="p_1"><a class="user" target="blank">{name}</a><span class="date">{date}</span></p>
<p class="comment"><span>{content}</span></p>
</div>
</script>
</ul>
</div>
</div>
</body>
<script>
//请参考实验报告补齐此段代码！
var DB_NAME = 'html5_storage_form_comment'; // 数据库和表名
var substitute = function (str, sub) { // 字符串格式化函数
return str.replace(/\{(.+?)\}/g, function ($0, $1) {
return $1 in sub ? sub[$1] : $0;
});
};
var comment_list = document.querySelector('ul.comment-list'),
first_item_el = document.getElementById('J_item'),
item_tpl = first_item_el.innerHTML,
submit_btn = document.querySelector('input[type="button"]'),
textarea_el = document.querySelector('textarea'),
tip_el = document.querySelector('span.tip'),
storageDriver = window.openDatabase(DB_NAME, '1.0', 'html5 storage comment', 1048576);
function build_item(data){
var li = document.createElement('li');
li.className = 'clearfix';
li.innerHTML = substitute(item_tpl,data);
li.setAttribute('data_id',data.id);
comment_list.insertBefore(li,first_item_el);
};
function store_data(data){
storageDriver.transaction(function(t){//往数据库插入一条数据
t.executeSql("INSERT INTO " + DB_NAME + " (img,name,data,content)VALUES(?,?,?,?);",
[data.img,data.name,data.data,data.content],//传入保存数据
function(transaction,resultSet){
data.id = resultSet.insertId;//获取数据库返回的自增ID
build_item(data);
textarea_el.value = '';
},function(transaction,error){ show_error_tip(error.message);});//错误回调函数
});
};
function show_error_tip(msg){
tip_el.style.display = 'inline';
tip_el.innerHTML = msg;
setTimeout(function(){
tip_el.style.display = 'none';
},1500);
};
submit_btn.addEventListener('click',function(e){
e.preventDefault();
var content = textarea_el.value.trim();
if (content.length) {
store_data({
img:(new Date().getTime())%5,
name: '陌生人'+(new Date().getTime())%5,
data: new Date().toLocaleString(),
content: content
});
}else{
show_error_tip('请填写留言内容');
};
},false);
storageDriver.transaction(function(t){//启动一个事务生产列表
t.executeSql("CREATE TABLE IF NOT EXISTS " + DB_NAME +//创建数据表
"(id INTEGER PRIMARY KEY AUTOINCREMENT,"+//自增字段
"name TEXT NOT NULL,"+//姓名字段
"data TEXT NOT NULL,"+//时间字段
"content TEXT NOT NULL,"+//内容字段
"img INTEGER DEFAULT 1)");//照片字段
t.executeSql("SELECT*FROM " + DB_NAME,[],//读物数据表
function(t,results){
for(var i = 0,l=results.rows.length;i<l;i++){
build_item(results.rows.item(i));
};
});
//t.executeSql("drop table" + DB_NAME);
});
</script>
</html>
控制台这个错误是图片资源加载失败吧？？
into后面加空格。。和表名称连一起组成一个词了，：）。。。
t.executeSql("INSERT INTO " + DB_NAME + "(img,name,data,content)VALUES(?,?,?,?);