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>
    
  • 相关阅读:
    Django学习过程中遇到的问题
    代理工具WebScarab安装(转载)
    MongoDB安装之window版本的安装
    QT打包
    小工具--串口
    多线程--信号量
    关于多线程
    QQ界面及简单操作实现
    udp通信
    char *p = "abc";char p[] = "abc";两者之间的区别
  • 原文地址:https://www.cnblogs.com/dearroy/p/12199586.html
Copyright © 2011-2022 走看看