表格增加行、删除行

最新推荐文章于 2021-01-12 11:37:06 发布

weixin_34221276

最新推荐文章于 2021-01-12 11:37:06 发布

阅读量244

点赞数

文章标签： c/c++ javascript ViewUI

原文链接：http://www.cnblogs.com/pecool/p/9900626.html

版权

一、代码：

<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='-' οnclick='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" οnclick="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="-" οnclick='deleteRow(this)'/></td>
        	</tr>
        	<tr>
        		<td>李毅2</td>
        		<td>28</td>
        		<td>610323234419239211232231213223873</td>
        		<td><input type="button" value="-" οnclick='deleteRow(this)'/></td>
        	</tr>
        </table>
	</body>
</html>

二、效果

转载于:https://www.cnblogs.com/pecool/p/9900626.html

weixin_34221276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格增加行、删除行

一、代码：<html> <head> <meta charset="utf-8" /> <title>table test</title> <!-- 作者：wyp55023@163.com 时间：2018-11-02 描述：增加、删除行 ...
复制链接

扫一扫