zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    Qt下设置QLabel字体的大小和颜色
    C#之隐式与显示类型转换
    .NET入行之工作前
    再见2016
    C#之DataTable转List与List转Datatable
    .NET入行之工作后
    js判断是pc端还是移动端
    .net中的ContextSwitchDeadlock异常
    今天,我的博客开通啦
    ASP.NET的页面生命周期
  • 原文地址:https://www.cnblogs.com/dearroy/p/12199586.html
Copyright © 2011-2022 走看看