HTML添加表格数据

kylin王国

已于 2022-09-05 17:04:54 修改

阅读量2.7k

点赞数

分类专栏： HTML 文章标签： javascript 前端 html

于 2022-09-05 17:02:57 首次发布

本文链接：https://blog.csdn.net/weixin_47634487/article/details/126709015

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px solid;
				/* margin: auto; */
				width: 1350px;
			}

			td,
			th {
				text-align: center;
				border: 1px solid;
			}
			.table{
				position: absolute;
				left: 15%;
			}
		</style>
	</head>
	<body>
		<div class="table">
			<div>
				<input type="text" id="id4" placeholder="请输入编号" size="56">
				<input type="text" id="name4" placeholder="请输入姓名" size="56">
				<input type="text" id="gender4" placeholder="请输入年龄" size="57">
				<!-- <input type="text" id="gender33" placeholder="请输入相对样品个数" size="40"> -->
				<input type="button" value="添加" id="btn_add4">
			</div>
			<table class="table4">
				<!-- <caption>统计表</caption> -->
				<tr style="background-color: cornflowerblue;;">
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>

				<tr>
					<td>1</td>
					<td>阿卡丽</td>
					<td>18</td>
					<!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
					<td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td>盲僧</td>
					<td>19</td>
					<!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
					<td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td>亚索</td>
					<td>20</td>
					<!-- 在该单元格中创建一个链接标签，void运算符来阻止href返回值，通过onclick事件(鼠标点击)属性来删除信息行-->
					<td><a href="javascript:void(0);" onclick="deleteTr(this);">删除</a></td>
				</tr>
		</div>


		</table>

	</body>
	<script src="js/table4.js"></script>
</html>

JS


		// 1.获取按钮
		var btn_add = document.getElementById("btn_add4");
		btn_add.onclick = function() {
			// 2.1 获取文本框对象
			var id4Object = document.getElementById("id4");
			var name4Object = document.getElementById("name4");
			var gender4Object = document.getElementById("gender4");
			// var gender22Object = document.getElementById("gender22");
			// 2.2 获取文本框的内容
			var id4 = id4Object.value;
			var name4 = name4Object.value;
			var gender4 = gender4Object.value;
			// var gender22 = gender22Object.value;

			//4.创建单元格，赋值单元格的标签体
			// id 的 单元格
			var td_id4 = document.createElement("td"); // 创建单元格
			var text_id4 = document.createTextNode(id4); // 赋值给单元格的标签体
			td_id4.appendChild(text_id4);
			// name 的 单元格
			var td_name4 = document.createElement("td");
			var text_name4 = document.createTextNode(name4);
			td_name4.appendChild(text_name4);
			//gender 的 单元格
			var td_gender4 = document.createElement("td");
			var text_gender4 = document.createTextNode(gender4);
			td_gender4.appendChild(text_gender4);
			// //gender2 的 单元格
			// var td_gender22 = document.createElement("td");
			// var text_gender22 = document.createTextNode(gender22);
			// td_gender22.appendChild(text_gender22);
			// a标签的单元格
			var td_a4 = document.createElement("td");
			var ele_a4 = document.createElement("a");
			ele_a4.setAttribute("href", "javascript:void(0);");
			ele_a4.setAttribute("onclick", "deleteTr(this);");
			var text_a4 = document.createTextNode("删除");
			ele_a4.appendChild(text_a4); // 为a标签写入文本内容："删除"
			td_a4.appendChild(ele_a4); // 为td标签添加子标签（a标签）
			<!-- <a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a> -->

			// 4.创建表格行
			var tr4 = document.createElement("tr");
			// 5.添加单元格到表格行中
			tr4.appendChild(td_id4);
			tr4.appendChild(td_name4);
			tr4.appendChild(td_gender4);
			// tr4.appendChild(td_gender22);
			tr4.appendChild(td_a4);
			// 6.获取table
			var table4 = document.getElementsByClassName("table4")[0];
			table4.appendChild(tr4);
		};

		// 删除方法
		function deleteTr(object) {
			// 获取table节点
			var table4 = object.parentNode.parentNode.parentNode;
			// 获取te节点
			var tr4 = object.parentNode.parentNode;
			// 删除（并返回）当前节点的指定子节点。
			table4.removeChild(tr4);
		}