<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function addNode(){
//1.添加节点 tr和td 利用innerHtml识别html语法 添加文本框 全部添加到表格中
//2.处理点击事件 文本框中输入结束失去焦点时触发onblur事件 让文本框内容提交到td中innerText(双标签中只获得文本内容)
//3.删除事件 del(this) this表示自身元素 获得父级的父级元素并删除 remove()
var tab=document.getElementById("tab")
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerHTML="<input type='text' size='5px' onblur='leave(this)' />"
var td2=document.createElement("td");
td2.innerHTML="<input type='text' size='5px' onblur='leave(this)' />"
var td3=document.createElement("td");
td3.innerHTML="<input type='button' value='添加' onclick='addNode()'/>"+
"<input type='button' value='删除' onclick='del(this)'/>"
tab.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
}
function del(self){
var tab=self.parentNode.parentNode;
tab.remove()
}
function leave(self){
var td=self.parentNode
td.innerText=self.value
}
</script>
<style type="text/css">
td,tr{width: 100px; height: 70px; text-align: center;}
</style>
</head>
<body>
<table border="1px" bordercolor="red" align="center" cellspacing=0 id="tab">
<tr height="70px">
<th width="100px">图书名称</th>
<th width="100px">图书价格</th>
<th width="130px">操作</th>
</tr>
<tr height="70px" align="center">
<td>java</td>
<td>$122</td>
<td ><input type="button" name="" id="" value="添加" onclick="addNode()"/>
<input type="button" value="删除" /></td>
</tr>
<tr height="70px" align="center">
<td>python</td>
<td>$100</td>
<td ><input type="button" name="" id="" value="添加" />
<input type="button" value="删除" /></tr></td>
</tr>
</table>
</body>
</html>
