js添加、删除以及添加删除指定行

最新推荐文章于 2024-08-08 16:36:35 发布

l2535460824

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量4.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/l2535460824/article/details/80680907

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//在末尾添加一行
			function add() {
				var mytable = document.getElementById("test");
				addrow = mytable.insertRow();//添加一行
				col1 = addrow.insertCell();//添加第一个单元格
				col2 = addrow.insertCell();//添加第二个单元格
				col1.innerHTML = "line";
				col2.innerHTML = "4";
				addrow.style.backgroundColor = "aqua";
			}
			//添加指定行
			function add1() {
				var mytable = document.getElementById("test");
				var i = document.getElementById("addindex").value;
				addrow = mytable.insertRow(i - 1); //括号里是0代表是在末尾追加一行，与不写效果相同
				col1 = addrow.insertCell();
				col2 = addrow.insertCell();
				col1.innerHTML = "line" + i;
				col2.innerHTML = i;
			}
			//删除末尾一行
			function del() {
				var mytable = document.getElementById("test");
				var len = mytable.rows.length;
				mytable.deleteRow(len - 1); //删除最后一行
			}
			//删除指定行
			function del1() {
				var mytable = document.getElementById("test");
				var i = document.getElementById("delindex").value;
				mytable.deleteRow(i - 1);

			}
		</script>
	</head>

	<body>
		<div align="center">
			<table width="60%" border="1px" id="test">
				<tr>
					<td>line1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>line3</td>
					<td>3</td>
				</tr>
				<tr>
					<td>line5</td>
					<td>5</td>
				</tr>

			</table>
		</div>
		<div align="center">
			<input type="button" value="添加一行" οnclick="add()" />
			<input type="button" value="删除一行" οnclick="del()" />
			<br>
			<br>
			<input type="button" value="添加指定行" οnclick="add1()" />
			<input type="text" id="addindex" />
			<br>
			<br>
			<input type="button" value="删除指定行" οnclick="del1()" />
			<input type="text" id="delindex" />
		</div>
	</body>

</html>