表格修改

最新推荐文章于 2022-03-14 18:40:59 发布

weixin_51275362

最新推荐文章于 2022-03-14 18:40:59 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/weixin_51275362/article/details/111142968

版权

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}
		
		body {
			width: 80%;
			margin: 0 auto;
		}
		
		table {
			width: 100%;
			border: 1px solid blue;
			border-collapse: collapse;
			margin-top: 15%;
		}
		
		tr,
		td,
		th {
			border: 1px solid blue;
			text-align: center;
		}
	</style>

	<script type="text/javascript">
		function deleteRow2(a) {
			//删除表格中的行
			var tableExe = document.getElementById('tableExe');
			//a就是this，在这里是我们的input
			var td = a.parentNode; //获取input的父节点-td
			var tr = td.parentNode; //获取td的父节点-tr
			var index = tr.rowIndex; //获取tr在表格中的行角标
			tableExe.deleteRow(index); //删除行
		}

		function deleteRow(a) {
			//删除表格中的行
			var tableExe = document.getElementById('tableExe');
			//a就是this，在这里是我们的input
			var td = a.parentNode; //获取input的父节点-td
			var tr = td.parentNode; //获取td的父节点-tr

			// tr.remove();自己删除自己
			// tableExe.removeChild(tr); 对于table删除行这种操作，该函数无效

		}

		function updateTable(a) {
			// 1. 获取点击的行，以及每一列的数据
			var tr = a.parentNode.parentNode;
			//获取每一列,这是一个数组
			var cells = tr.cells;
			//console.log(cells);
			var id = cells[0].innerText;
			var name = cells[1].innerText;
			var gender = cells[2].innerText;
			var phone = cells[3].innerText;
			var address = cells[4].innerText;

			var values = [id, name, gender, phone, address];

			console.log(id);
			console.log(name);
			console.log(gender);
			console.log(phone);
			console.log(address);

			// 2. 创建一个表单出来（创建表单中的input）,然后把获取的列数据填充到表单中
			// 	2.1创建一个表单出来（创建表单中的input）
			// 	2.2把获取的列数据填充到表单中
			resetForm();

			for(var i = 0; i < values.length; i++) {
				var input = document.createElement("input");
				input.value = values[i];
				tableForm.appendChild(input);
			}
			var input = document.createElement("input");
			input.setAttribute("type", "button");
			input.setAttribute("onclick", "save(" + tr.rowIndex + ")");
			input.value = "保存修改";
			tableForm.appendChild(input);

		}

		function save(index) {

			var r = confirm("确定修改吗？");
			if(r == false) {
				return;
			}

			var tr = document.getElementById('tableExe').rows[index];
			//获取表单
			var tableForm = document.getElementById('tableForm');
			//获取表单中所有的input
			var length = tableForm.length;

			var cells = tr.cells;

			for(var i = 0; i < cells.length - 1; i++) {
				cells[i].innerText = tableForm.elements[i].value;
			}
			resetForm();

		}

		function resetForm() {
			var tableForm = document.getElementById('tableForm');
			//把tableForm中所有的子节点都给删除掉
			var length = tableForm.length;
			for(var i = 0; i < length; i++) {
				tableForm.elements[0].remove();
			}
		}
	</script>

</head>

<body>
	<form id="tableForm">

	</form>
	<table id="tableExe">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>电话</th>
			<th>地址</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1001</td>
			<td>小钻风</td>
			<td>男</td>
			<td>10086</td>
			<td>狮驼岭</td>
			<td>
				<input type="button" value="更新" onclick="updateTable(this)" />
				<input type="button" value="删除" onclick="deleteRow(this)" />
			</td>
		</tr>
		<tr>
			<td>1002</td>
			<td>红孩儿</td>
			<td>男</td>
			<td>10010</td>
			<td>南海</td>
			<td>
				<input type="button" value="更新" onclick="updateTable(this)" />
				<input type="button" value="删除" onclick="deleteRow(this)" />
			</td>
		</tr>
					<tr>
			<td>1002</td>
			<td>黄眉大王</td>
			<td>男</td>
			<td>10010</td>
			<td>小雷音寺</td>
			<td>
				<input type="button" value="更新" onclick="updateTable(this)" />
				<input type="button" value="删除" onclick="deleteRow(this)" />
			</td>
		</tr>

	</table>
</body>