JavaScript-Dom入门实例练习-图书管理系统的提交页面
文章目录
- 需求分析
- 页面设计
- 修改样式
- 删除无用信息
- 添加新的信息
- 完整代码
- html
- css
- JavaScript
- 进阶改良
代码这种东西看十遍不如敲一遍。
—鲁·我没有说过·迅·沃茨基硕德
好的程序猿一定是敲代码敲出来的，在学习过的基础知识后，多敲两遍实例能极大地增强自己的理解。
因为是dom的实例，所以大部分笔记都在JavaScript部分，作者水平很渣html和css都是怎么简单怎么来，相信大家都能看懂，我在下面还贴了手册连接。
css手册
html手册
JavaScript手册
需求分析
我们今天的目标是图书管理系统的动态提交页面
对于完整的图书管理系统我们可能会用表单提交这个页面
要能够添加图书，包括书籍的名称、编号、价格。或许还会有更多需求。
基本功能：增删改查。因为只是完成提交页面所以不需要读取和修改数据库中的信息，只是针对当前页面所以我们要完成当前页面的增删改。
html文件名：dom_D.html
css文件名：dom_C.css
js文件名：dom_J.js
页面设计
首先我们需要一个表格显示图书信息
<body>
<div><!- 这个表格用于显示信息->
<table >
<tr>
<th>书名th>
<th>编号th>
<th>价格th>
<th>操作th>
tr>
<tr>
<td>软件工程导论td>
<td>001td>
<td>39.50td>
<td><a href="#">删除a>td>
tr>
<tr>
<td>人工智能导论td>
<td>002td>
<td>31.00td>
<td><a href="#">删除a>td>
tr>
table>
div>
body>
然后我们还需要能够添加新的图书
<div><!-这个表格用于添加信息 ->
<table>
<tr>
<th colspan="2" align="center">
添加书籍
th>
tr>
<tr>
<td>书名：td>
<td>
<input type="text" name="bookName" id="bookName"/>
td>
tr>
<tr>
<td>编号：td>
<td>
<input type="text" name="number" id="number"/>
td>
tr>
<tr>
<td>价格：td>
<td>
<input type="text" name="pay" id="pay"/>
td>
tr>
<tr>
<td colspan="2" align="center">
<button id="addButton" value="#">
添加书籍
button>
<button id="upload" value="#">
上传文档
button>
<!-为上传表单预留的按钮，本次实验没有用到->
tr>
table>
div>
太丑了，使用css稍微美化一下页面后
修改样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍管理title>
<link rel="stylesheet" type="text/css" href="dom_C.css"/><!-引用css样式表 ->
<script type="text/javascript" src="dom_J.js">script><!-引用外部js文件 ->
head>
<body>
<div id="bookDiv"><!- 这个表格用于显示信息->
<table id="bookTable">
<tr>
<th>书名th>
<th>编号th>
<th>价格th>
<th>操作th>
tr>
<tr>
<td>软件工程导论td>
<td>001td>
<td>39.50td>
<td><a href="javascript:;">删除a>td>
tr>
<tr class="alt">
<td>人工智能导论td>
<td>002td>
<td>31.00td>
<td><a href="javascript:;">删除a>td>
tr>
table>
div>
<div><!-这个表格用于添加信息 ->
<table id="add">
<tr>
<th colspan="2" align="center">
添加书籍
th>
tr>
<tr>
<td class="wp">书名：td>
<td class="inp">
<input type="text" name="bookName" id="bookName"/>
td>
tr>
<tr>
<td class="wp">编号：td>
<td class="inp">
<input type="text" name="number" id="number"/>
td>
tr>
<tr>
<td class="wp">价格：td>
<td class="inp">
<input type="text" name="pay" id="pay"/>
td>
tr>
<tr>
<td id="submit" colspan="2" align="center">
<button id="addButton" value="#">
添加书籍
button>
<button id="upload" value="#">
上传文档
button>
tr>
table>
div>
body>
html>
这是css文件内容
#bookTable{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 500px;
border-style: solid;
border-collapse:collapse;
border-color: #98bf21;
border-width: medium;
}
#bookTable th,#bookTable td{
font-size: 1em;
border: 2px solid #98bf21;
padding: 3px 7px;
}
#bookTable th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #a7c942;
color: white;
}
#bookTable .alt
{
background-color: #eaf2d3;
color: black;
}
#add{
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border-style: solid;
padding:10px
}
还是很丑，不过将就着可以用了
删除无用信息
对于已经添加的图书信息我们可能最后并不需要或者需要更新，我们需要将已有的信息删除
window.onload = function(){
var allA = document.getElementsByTagName("a");//获取a标签
for(var i= 0; i< allA.length; i++){//遍历全部节点
allA[i].onclick=function(){//绑定单击相应函数
var tr = this.parentNode.parentNode;//通过a向上获得tr
var name = tr.firstElementChild;//获得书籍名称，我们亲爱的ie依旧可能会有兼容性问题
//var name=tr.children[0].innerHTML://不兼容可以换这一句
if(confirm("是否确认删除《"+name.innerHTML+"》？")){//确认信息
tr.parentNode.removeChild(tr);//删除tr
}
return false;//取消a标签的默认跳转
}
}
}
添加新的信息
将新的内容添加到表中是我们的主要目的
var addButton = document.getElementById("addButton");//获取按钮
addButton.onclick=function () {//绑定单击相应函数
var name = document.getElementById("bookName").value;//获得文本
var number = document.getElementById("number").value;//获得文本
var pay = document.getElementById("pay").value;//获得文本
var tr = document.createElement("tr");//创建一个新的节点，并添加内容
tr.innerHTML=""+name+" "+number+" "+pay+" 删除 ";
var bookTable = document.getElementById("bookTable");
bookTable.appendChild(tr);//插入到表中
var bookTable = document.getElementById("bookTable");//下面是为新的信息添加样式，非强迫症可以不写
var trStyle = bookTable.getElementsByTagName("tr");//而且算法虽然简单但及其浪费内存
for(var i=1;i<trStyle.length;i++){
if(i%2!=0){
trStyle[i].style.backgroundColor="wirte";
}else{
trStyle[i].style.backgroundColor="#eaf2d3";
}
}
}
现在我们可以添加新的东西了，但是我们发现新添加的信息不能被删。
因为单机相应函数是在页面加载完成后绑定的，新添加的a并没有绑定。需要再次调用函数绑定
而且在调试界面我们发现table标签下出现了一个tbody标签，这个标签好像是浏览器帮我们加上的，尚不清楚作用。 但是却造成了一些隐患，因为我们新添加的对象是与tbody是兄弟关系，这并不是一件好的事情，一家人就要整整齐齐。在Chrome测试时文本还会被自动创建的< font >所以最好用innerText替换，所以我们需要修改一下代码
所以我们应当将本来插入table的tr插入到tbody中，将单机相应函数提出到全局方便复用
修改后的代码标注在最后完成代码中
完整代码
html
html文件名：dom_D.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍管理title>
<link rel="stylesheet" type="text/css" href="dom_C.css"/><!-引用css样式表 ->
<script type="text/javascript" src="dom_J.js">script><!-引用外部js文件 ->
head>
<body>
<div id="bookDiv"><!- 这个表格用于显示信息->
<table id="bookTable">
<tr>
<th>书名th>
<th>编号th>
<th>价格th>
<th>操作th>
tr>
<tr>
<td>软件工程导论td>
<td>001td>
<td>39.50td>
<td><a href="javascript:;">删除a>td>
tr>
<tr class="alt">
<td>人工智能导论td>
<td>002td>
<td>31.00td>
<td><a href="javascript:;">删除a>td>
tr>
table>
div>
<div><!-这个表格用于添加信息 ->
<table id="add">
<tr>
<th colspan="2" align="center">
添加书籍
th>
tr>
<tr>
<td class="wp">书名：td>
<td class="inp">
<input type="text" name="bookName" id="bookName"/>
td>
tr>
<tr>
<td class="wp">编号：td>
<td class="inp">
<input type="text" name="number" id="number"/>
td>
tr>
<tr>
<td class="wp">价格：td>
<td class="inp">
<input type="text" name="pay" id="pay"/>
td>
tr>
<tr>
<td id="submit" colspan="2" align="center">
<button id="addButton" value="#">
添加书籍
button>
<button id="upload" value="#">
上传文档
button><!-这个按钮可以用来提交表单但本实验并没有实现，可以不写->
tr>
table>
div>
body>
html>
css
css文件名：dom_C.css
#bookTable{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 500px;
border-style: solid;
border-collapse:collapse;
border-color: #98bf21;
border-width: medium;
}
#bookTable th,#bookTable td{
font-size: 1em;
border: 2px solid #98bf21;
padding: 3px 7px;
}
#bookTable th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #a7c942;
color: white;
}
#bookTable .alt
{
background-color: #eaf2d3;
color: black;
}
#add{
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border-style: solid;
padding:10px
}
JavaScript
js文件名：dom_J.js
window.onload = function(){
var allA = document.getElementsByTagName("a");//获取a标签
for(var i= 0; i< allA.length; i++){//遍历全部节点
allA[i].onclick=del;//***********这里发生了变动
}
var addButton = document.getElementById("addButton");//获取按钮
addButton.onclick=function () {//绑定单击相应函数
var name = document.getElementById("bookName").value;//获得文本
var number = document.getElementById("number").value;//获得文本
var pay = document.getElementById("pay").value;//获得文本
var tr = document.createElement("tr");//创建一个新的节点，并添加内容
tr.innerHTML=""+name+" " +
""+number+" "+
""+pay+" "+
"删除 ";//注意嵌套用元字符或单引号
var a = tr.getElementsByTagName("a");
a[0].onclick=del;//绑定新的相应函数********这里发生了变动
//哪怕只有一个对象getElementsByTagName返回的也是数组，为什么我要强调？这是一个悲伤的故事。
var bookTable = document.getElementById("bookTable");
var tbody = bookTable.getElementsByTagName("tbody");//*****************这里发生了变动
tbody[0].appendChild(tr);//虽然代码中并没有tbody但运行后内存中是有的所以是可以使用的
var bookTable = document.getElementById("bookTable");//下面是为新的信息添加样式，非强迫症可以不写
var trStyle = bookTable.getElementsByTagName("tr");//而且算法虽然简单但及其浪费内存
for(var i=1;i<trStyle.length;i++){
if(i%2!=0){
trStyle[i].style.backgroundColor="wirte";
}else{
trStyle[i].style.backgroundColor="#eaf2d3";
}
}
}
}
//*****************************************这里发生了变动
var del = function(){//绑定单击相应函数
var tr = this.parentNode.parentNode;//通过a向上获得tr
var name = tr.firstElementChild;//获得书籍名称，我们亲爱的ie依旧可能会有兼容性问题
//var name=tr.children[0].innerHTML://不兼容可以换这一句
if(confirm("是否确认删除《"+name.innerText+"》？")){//确认信息
tr.parentNode.removeChild(tr);//删除tr
}
return false;//取消a标签的默认跳转
}
进阶改良
之前我们对一系列于单击相应函数采用遍历的方法绑定，这种方法麻烦而且效率低下；
在学习了事件的委派后我们可以让代码更为整洁高效。
window.onload = function(){
var table = document.getElementById("bookTable");
table.onclick = function ( ) {
if(window.event.target.className=="link"){//委派事件
del();
}
}
addButton.onclick=function () {
var name = document.getElementById("bookName").value;
var number = document.getElementById("number").value;
var pay = document.getElementById("pay").value;
var tr = document.createElement("tr");
tr.innerHTML=""+name+" " +
""+number+" "+
""+pay+" "+
"删除 ";
var bookTable = document.getElementById("bookTable");
var tbody = bookTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
var bookTable = document.getElementById("bookTable");
var trStyle = bookTable.getElementsByTagName("tr");
for(var i=1;i<trStyle.length;i++){
if(i%2!=0){
trStyle[i].style.backgroundColor="wirte";
}else{
trStyle[i].style.backgroundColor="#eaf2d3";
}
}
}
}
var del = function(){
var tr = event.target.parentNode.parentNode;//寻找触发事件元素的爷爷
var name = tr.firstElementChild;
if(confirm("是否确认删除《"+name.innerText+"》？")){
tr.parentNode.removeChild(tr);
}
return false;
}