js 实现表格行的增加和删除

最新推荐文章于 2023-10-11 17:30:01 发布

Biteee

最新推荐文章于 2023-10-11 17:30:01 发布

阅读量374

点赞数

CC 4.0 BY-SA版权

文章标签： web js html

本文链接：https://blog.youkuaiyun.com/qq_37489906/article/details/79596952

本文介绍了一个使用HTML和JavaScript实现的简单网页，该网页包含一个可以动态调整行数的表格。通过用户输入确定表格的行数，并能根据输入增加或删除表格行。此外，表格展示了不同浏览器的图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Table</title>
	<style>

       body {
	margin: 0 auto;
	font-family: STXihei, "Microsoft YaHei";
        }
    table{border-collapse:collapse;}
div {
	margin: 0 auto;
	width: 80%;
	text-align: left;
	font-family: "华文琥珀","Microsoft YaHei";
}
button {
	margin-left: 5px; 
	border-radius: 5px;
}
th,
td {
	padding: 5px;
	text-align: center;
	border: 1px solid blue;
	background-color: #EEE;
}
#pnumber {
	width: 50px;
	border-radius: 5px;
	text-align: center;
}
.table {
	margin: 0 auto;
	width: 80%;
}

        </style>

</head>
<body>
	<!--标题-->
	<h1 style="text-align: center;">Table</h1>
	<div>
		表格行数： <input type="text" name="pnumber" value="6" id="pnumber">
		<button onclick="pnumber();">提交</button>
	</div>
		<!--表格内容-->
		<table class="table" id="table">
			<tr>
				<th>Name</th>
				<th>Icon</th>
			</tr>
			<tr>
				<td>IE</td>
				<td><img src="./assets/img/ie.png" alt="*"/></td>
			</tr>
			<tr>
				<td>Chrome</td>
				<td><img src="./assets/img/chrome.png" alt="*"></td>
			</tr>
			<tr>
				<td>Firefox</td>
				<td><img src="./assets/img/firefox.png" alt="*"></td>
			</tr>
			<tr>
				<td>Opera</td>
				<td><img src="./assets/img/opera.png" alt="*"></td>
			</tr>
			<tr>
				<td>Safari</td>
				<td><img src="./assets/img/safari.png" alt="*"></td>
			</tr>
		</table>

<script>

function pnumber() {
	var t,o;
	var rows=table.rows.length;
	t=rows;
	var n=document.getElementById("pnumber").value;
	if (n<1) {alert("error：\n数值输入错误"); history.go(0);}
	if (n<t) {
		o=t-n;
		for (var i=0;i<o;i++) {
			rows=table.rows.length;
			document.getElementById("table"). deleteRow(rows-1);
		}
	}
	if (n>t) {
		for(var j=t;j<n;j++) {
			rows=table.rows.length;
			var r=document.getElementById("table").insertRow(rows);
			var d1=r.insertCell(0);
			var d2=r.insertCell(1);
			d1.innerHTML=rows+1;
			d2.innerHTML=rows+1;
		}
	}
	return 0;
}

</script>

</body>
</html>