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
  • 相关阅读:
    java反射机制
    jdbc连接mysql时发出警告:WARN: Establishing SSL connection without server's identity verification is not recommended...
    java,jdbc操作数据库
    vue.js 第十课-第十六课
    vue.js 第九课
    vue.js 第八课
    如何扒代码。。。
    vue.js第七课
    工作总结
    滤镜 filter:gray 变灰色
  • 原文地址:https://www.cnblogs.com/pecool/p/9900626.html
Copyright © 2011-2022 走看看