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>