zoukankan      html  css  js  c++  java
  • 表格增加行、删除行

    一、代码:

    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>table test</title>
    		<!--
            	作者:wyp55023@163.com
            	时间:2018-11-02
            	描述:增加、删除行
            -->
    		<script src="js/jquery-1.8.3.js"></script>
    		<script type="text/javascript">
    			//增加行
    			function addRow(){
    				var myTab = document.getElementById("myTable");
    				var tr = myTab.insertRow();
    				var td1 = tr.insertCell();
    				var td2 = tr.insertCell();
    				var td3 = tr.insertCell();
    				var td4 = tr.insertCell();
    				td1.innerHTML = "张甜";
    				td2.innerHTML = "18";
    				td3.innerHTML = "610234838wer8r49234";
    				td4.innerHTML = "<input type='button' value='-' onclick='deleteRow(this)'/>";
    			}
    			//删除行
    			function deleteRow(btn){
    				var tr= btn.parentNode.parentNode;
    				var myTab = document.getElementById("myTable");
    				myTab.deleteRow(tr.rowIndex);
    			}
    		</script>
    		
    	</head>
    	<body>
            <input type="button" value="+" id="addMsg" onclick="addRow()"/>
            <table border="1" id="myTable">
            	<tr>
            		<th>name</th>
            		<th>age</th>
            		<th>postCode</th>
            		<th>操作</th>
            	</tr>
            	<tr>
            		<td>李毅1</td>
            		<td>28</td>
            		<td>610323234419239211232231213223873</td>
            		<td><input type="button" value="-" onclick='deleteRow(this)'/></td>
            	</tr>
            	<tr>
            		<td>李毅2</td>
            		<td>28</td>
            		<td>610323234419239211232231213223873</td>
            		<td><input type="button" value="-" onclick='deleteRow(this)'/></td>
            	</tr>
            </table>
    	</body>
    </html>
    

    二、效果

    Best Regards
  • 相关阅读:
    Aop——面向切面编程
    认识界上最流行的Api框架——swagger
    手把手SSM框架实战
    面试题
    重新拾起JavaSE的日子
    使用IntelliJ IDEA创建第一个Maven项目
    Java面试必考题
    Vue项目——去哪网(首页部分)
    Vue项目的准备
    vue.js ③
  • 原文地址:https://www.cnblogs.com/pecool/p/9900626.html
Copyright © 2011-2022 走看看