您的位置：首页 > Web前端 > JavaScript

JS 利用节点实现对表格的动态添加删除

2016-09-07 23:08 941 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
td{ align="center"}

</style>
<body>
<h1 align="center">图书列表</h1>
<div align="center" style="margin:0 auto">按编号查找： <input type="text" id="inputSearch"  /> <button type="button" id="search" onclick="searchXX()">搜索</button></div>
<script>
function searchXX(){

var findByNum=document.getElementById("inputSearch").value;
//alert(findByNum);
var tables =  document.getElementsByTagName("tr");

for(var i = 0 ; i < tables.length ; i ++){
tables[i].style.backgroundColor = "white";
}

for(var i = 0 ; i < tables.length ; i ++){
if(tables[i].id==findByNum){
tables[i].style.backgroundColor = "red";
var s ="#"+findByNum;//本行实现的是搜索后跳到被搜索的信息的位置
window.location.hash = s; //本行实现的是搜索后跳到被搜索的信息的位置
return;
}
}
/*  for(var i = 0 ; i < tables.length ; i ++){
if(tables[i].id==findByNum){
tables[i].style.backgroundColor = "red";
return;
}
}
alert("没有这个书籍信息！");
}*/

</script>
<div style="float:right" ><button type="button" id="addBook" onclick="addBook()">添加书籍</button></div>
<br/>
<hr />
<table border="0" align="center"  width="1000px" id="bookList" >
<tr align="center"  >
<td >编号</td>
<td >书名</td>
<td >作者</td>
<td >价格</td>
<td >操作</td>
</tr>
</table>

</body>
</html>
<script>
function addBook(){
var bookNum=prompt("书籍编号：");
var bookName=prompt("书名：");
var bookAuthor=prompt("作者：");
var bookPrice=prompt("价格：");
if(bookNum==null||bookName==null||bookAuthor==null||bookPrice==null||bookNum==''||bookName==''||bookAuthor==''||bookPrice==''){
alert("一项或者多项内容不合法，添加失败");
return;
}else{
addBookNow(bookNum,bookName,bookAuthor,bookPrice);
}

}
function addBookNow(bookNum,bookName,bookAuthor,bookPrice){
alert("添加成功");
var s = $("bookList");
var trs = document.createElement("tr");
trs.id=bookNum;
var td1 = document.createElement("td");

var text1 = document.createTextNode(bookNum);
td1.appendChild(text1);
td1.setAttribute("align","center");//样式必须要加双引号
trs.appendChild(td1);

var td2 = document.createElement("td");
var text2 = document.createTextNode(bookName);
td2.appendChild(text2);
td2.setAttribute("align","center");
trs.appendChild(td2);

var td3 = document.createElement("td");
var text3 = document.createTextNode(bookAuthor);
td3.appendChild(text3);
td3.setAttribute("align","center");
trs.appendChild(td3);

var td4 = document.createElement("td");
var text4 = document.createTextNode(bookPrice);
td4.appendChild(text4);
td4.setAttribute("align","center");
trs.appendChild(td4);

var td5 = document.createElement("td");
var delButton = document.createElement("button");
delButton.type = "button";
delButton.value="删除本数据";

delButton.onclick=delBooks;//在行中添加button节点的onclick属性的时候方法不能"",'',---不会有用|||||f()---创建时候直接执行？？

var c = document.createTextNode("删除本条");
delButton.appendChild(c);

td5.appendChild(delButton);
td5.setAttribute("align","center");
trs.appendChild(td5);

s.appendChild(trs);

}

function $(id){
return document.getElementById(id);
}

function delBooks(delButton){

var ben=this.parentNode;
alert(ben);//单元格节点
var par =ben.parentNode;
alert(par);//行节点
par.remove();
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS onclick 增删表格

相关文章推荐

新的分享

章节导航