表格增加行、删除行

一、代码:

<html>
	<head>
		<meta charset="utf-8" />
		<title>table test</title>
		<!--
        	作者:[email protected]
        	时间: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>

二、效果

猜你喜欢

转载自www.cnblogs.com/pecool/p/9900626.html