js 表格操作----添加删除

js 表格操作----添加删除

书名：<input type="text" id="name">	
价格：<input type="text" id="price">	
			<button onclick="add()">添加</button>
			<table id="table" width="800" border="1">
				<tr>
					<td>书名</td>	
					<td>价格</td>
					<td>操作</td>			
				</tr>
				<tr>
					<td>远方的美好</td>	
					<td>￥99</td>
					<td><button onclick="del(this)">删除</button></td>			
				</tr>
				<tr>
					<td>精通javascript</td>	
					<td>￥99</td>
					<td><button onclick="del(this)">删除</button></td>			
				</tr>
			</table>
		<script>
			function del(e){
				var tr = e.parentElement.parentElement;
				//获取tr button的父亲的父亲
				var index = tr.rowIndex;
				//获取是第几行
				var table = document.getElementById("table");
				//获取table
				table.deleteRow(index);
				//table删除第index行
			}
			function add(){
				var table = document.getElementById("table");
			}
			//获取table
				var name = document.getElementById("name");
				//获取名称
				var price = document.getElementById("price");
				//获取价格
				var tr = table.insertRow(1);
				//插入到表格的第二行
				var td1 = tr.insertCell(0);
				//插入列
				var td2 = tr.insertCell(1);
				var td3 = tr.insertCell(2);
				td1.innerHTML= name.value;
				//设置列的内容
				td2.innerHTML= "￥"+price.value;
				td3.innerHTML= '<button οnclick="del(this)">删除</button>';
				price.value='';//清空价格input的内容
				name.value='';//清空书名input的内容
		</script>