CSS+html+js人员信息表

77 阅读 0 评论 51 点赞

我是靠谱客的博主文艺百合，最近开发中收集的这篇文章主要介绍CSS+html+js人员信息表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

查看
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>