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
  • 相关阅读:
    Set,List,Map,Vector,ArrayList的区别
    关于List,Set,Map能否存储null
    JAVA集合 DelayQueue 的使用 (同步的超时队列)
    FluentScheduler .Net 定时Job
    BeanFactory和FactoryBean
    ansj 分词,超过了标准的 IK 分词.
    Python字典、集合结构详解
    Python列表、元组结构详解
    C语言--结构体&文件
    C语言--指针
  • 原文地址:https://www.cnblogs.com/pecool/p/9900626.html
Copyright © 2011-2022 走看看