CSS+html+js人员信息表

最新推荐文章于 2023-07-27 18:05:24 发布

liaoMITC

最新推荐文章于 2023-07-27 18:05:24 发布

阅读量558

点赞数 1

文章标签： JavaScript HTML表格数据操作用户交互前端开发

本文链接：https://blog.csdn.net/liaojsgtcg/article/details/120619924

版权

给查询，修改，删除，加入具体操作

查看
function view(currentObj) {
var stuNo = currentObj.parentNode.parentNode.children[1].innerHTML;
var name = currentObj.parentNode.parentNode.children[2].innerHTML;
var major = currentObj.parentNode.parentNode.children[3].innerHTML;
alert(stuNo + “-” + name + “-” + major);
}

修改
function modify(obj) {
var stuNo = obj.parentNode.parentNode.children[1].innerHTML;
var name = obj.parentNode.parentNode.children[2].innerHTML;
var major = obj.parentNode.parentNode.children[3].innerHTML;
var newVal = prompt(“请按照学号-姓名-专业格式修改信息”, stuNo + “-” + name + “-” + major);
if (newVal != null) {
strArray = newVal.split("-");
var newNo = strArray[0];
var newName = strArray[1];
var newMajor = strArray[2];
obj.parentNode.parentNode.children[1].innerHTML = newNo;
obj.parentNode.parentNode.children[2].innerHTML = newName;
obj.parentNode.parentNode.children[3].innerHTML = newMajor;
}
}

删除
function deleteCell(obj) {
obj.parentNode.parentNode.remove();
}

总代码：

<html>
	<head>
		<script type="text/javascript">
			function deleteCell(obj) {
				obj.parentNode.parentNode.remove();
			}

			function view(currentObj) {
				var stuNo = currentObj.parentNode.parentNode.children[1].innerHTML;
				var name = currentObj.parentNode.parentNode.children[2].innerHTML;
				var major = currentObj.parentNode.parentNode.children[3].innerHTML;
				alert(stuNo + "-" + name + "-" + major);
			}
			function modify(obj) {
							var stuNo = obj.parentNode.parentNode.children[1].innerHTML;
							var name = obj.parentNode.parentNode.children[2].innerHTML;
							var major = obj.parentNode.parentNode.children[3].innerHTML;
							var newVal = prompt("请按照学号-姓名-专业格式修改信息", stuNo + "-" + name + "-" + major);
							if (newVal != null) {
								strArray = newVal.split("-");
								var newNo = strArray[0];
								var newName = strArray[1];
								var newMajor = strArray[2];
								obj.parentNode.parentNode.children[1].innerHTML = newNo;
								obj.parentNode.parentNode.children[2].innerHTML = newName;
								obj.parentNode.parentNode.children[3].innerHTML = newMajor;
								
							}
								
						} 		
			function checkAll(sender, checkClass) {
				// 方法返回元素的顺序是它们在文档中的顺序，
				// 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，
				// 它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
				var checkItems = document.getElementsByTagName('input');
				// 使用for循环依次取出列表中的数据
				for (var i = 0; i < checkItems.length; i++) {
					//input中的类型正确则打钩
					if (checkItems[i].type === 'checkbox' && checkItems[i].className === 'one') {
						checkItems[i].checked = sender.checked;
					}
					
				}

				
			}


			function addByScript() {
				var table = document.getElementById("tbls");
				var tr = document.createElement("tr");
				tr = table.insertRow(table.rows.length - 1);

				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				var td3 = document.createElement("td");
				var td4 = document.createElement("td");
				var td5 = document.createElement("td");

				td1.innerHTML = "<input type='checkbox' class='one'/>";
				td5.innerHTML =
					"<button οnclick='view(this)'>查看</button> <button οnclick='modify(this)'>修改</button><input type='button' value='删除' οnclick='deleteCell(this)'/>";

				var stuNo = "101";
				var name = "张三";
				var major = "智科";

				var newVal = prompt("格式：学号-姓名-专业，例如->", stuNo + "-" + name + "-" + major);
				if (newVal != null) {
					strArray = newVal.split("-");
					var newNo = strArray[0];
					var newName = strArray[1];
					var newMajor = strArray[2];
					td2.innerHTML = newNo;
					td3.innerHTML = newName;
					td4.innerHTML = newMajor;

				}


				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);


				// var contentCell = newRow.insertCell(-1);
				// contentCell.innerHTML = '<input type="text" />';
				// contentCell = newRow.insertCell(-1);



			}
		</script>
		<style>
			table,
			td {
				border-width: 1px;
				border-style: solid;
				border-color: yellowgreen;
			}

			table,
			th,
			tr,
			td {
				height: 60px;
			}

			tr,
			td {
				height: 60px;
			}

			table {
				margin-left: 28%;
				width: 600px;
				border-collapse: collapse;

				/* 				outline-style: solid;
				outline-color: yellowgreen;
				outline-width: 1px; */
			}

			td {

				text-align: center;
				font-size: 12px;
			}

			th {
				background-color: black;
				color: white;
				font-size: 14px;
				font-family: "SimSun";

			}

			a:link {

				float: right;
				text-decoration: none;
				padding: 15px;
				font-size: 14px;

			}

			tr:nth-child(even) {
				background-color: #f2f2f2;
			}

			tr:hover {
				background-color: #FFCC66;
			}
		</style>
		<meta charset="utf-8" />

	</head>
	<body>

		<table id="tbls">
			<tbody id="mainbody">
				<tr>
					<th><input type="checkbox" onclick="checkAll(this, 'one');" /></th>
					<th>学号</th>
					<th>姓名</th>
					<th>专业</th>
					<th>操作</th>
				</tr>
				<tr id="deleteCell">
					<td><input type="checkbox" class="one" /></td>
					<td>9527</td>
					<td>唐伯虎</td>
					<td>美术</td>
					<td><button onclick="view(this)">查看</button> <button onclick='modify(this)'>修改</button> <input type="button" value="删除"
							onclick="deleteCell(this)" />
					</td>


				</tr>
				<tr id="deleteCell">
					<td><input type="checkbox" class="one" /></td>
					<td>007</td>
					<td>武松</td>
					<td>体育</td>
					<td><button onclick="view(this)">查看</button> <button onclick='modify(this)'>修改</button> <input type="button" value="删除"
							onclick="deleteCell(this)" />
					</td>
				</tr>
				<tr id="deleteCell">
					<td><input type="checkbox" class="one" /></td>
					<td>1024</td>
					<td>诸葛亮</td>
					<td>心理学</td>
					<td><button onclick="view(this)">查看</button> <button onclick='modify(this)'>修改</button> <input type="button" value="删除"
							onclick="deleteCell(this)" />
					</td>

				</tr>
				<tr id="deleteCell">
					<th><input type="button" class="button" value='新增' onclick="addByScript()" /></th>
					<th colspan="5">
						<p><b><a href="default.asp" target="_blank">首页</a></b>
							<a href="default.asp" target="_blank">上一页</a></b>
							<b><a href="default.asp" target="_blank">下一页</a></b>
							<b><a href="default.asp" target="_blank">页尾</a></b>
						</p>
					</th>
				</tr>

		</table>

	</body>
</html>