界面样式

主要功能

添加学生
删除学生
鼠标悬停时，将所在行变为绿色
支持全选，反选，和全不选

代码部分

html

<html><head><meta charset="UTF-8"><title>学生信息管理系统</title><link rel="stylesheet" href="css/index.css">
</head><body><div id="title">学生信息管理系统</div><div id="input-box"><input id="id" type="text" placeholder="请输入学号" name="id"><input id="name" type="text" placeholder="请输入姓名" name="name"><input id="gender" type="text" placeholder="请输入性别" name="gender"><button id="add">添加</button></div><br><br><div id="table-box"><div id="title1">学生信息表<br><button id="arcall">反选</button><button id="empty">全不选</button><button id="all">全选</button></div><table id="stutable"><tr id="row1"><td></td><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr></table></div></body><footer><script src="js/index.js"></script>
</footer></html>

div {width: 100%;text-align: center;margin: auto;
}#title {font-weight: 700;
}#stutable {width: 50%;margin: 3px auto;border: 1px solid black;text-align: center;
}#stutable tr td {width: 120px;text-align: center;border: 1px solid black;
}#title1 {margin: auto auto;font-weight: 700;width: 30%;
}#title1 button {}

javascript

var studentAddButton = document.getElementById("add");function createCell(name) {var message = document.getElementById(name);var textNode = document.createTextNode(message.value);var cell = document.createElement("td");cell.appendChild(textNode);return cell;
}function createDeleteCell() {var textNode = document.createTextNode("删除");var deleteCell = document.createElement("a");deleteCell.appendChild(textNode);deleteCell.setAttribute("href", "javascript:void(0);");deleteCell.setAttribute("id", "delete");deleteCell.onclick = function () {var parent = this.parentNode;var tmp = parent = parent.parentNode;parent = parent.parentNode;parent.removeChild(tmp);}var cell = document.createElement("td");cell.appendChild(deleteCell);return cell
}function createSmallCell() {var box = document.createElement("input");box.setAttribute("type", "checkbox");box.setAttribute("class", "cbox");var smallCell = document.createElement("td");smallCell.appendChild(box);return smallCell;
}studentAddButton.onclick = function () {var table = document.getElementById("stutable");var nextRow = document.createElement("tr");nextRow.appendChild(createSmallCell());nextRow.appendChild(createCell("id"));nextRow.appendChild(createCell("name"));nextRow.appendChild(createCell("gender"));nextRow.appendChild(createDeleteCell());nextRow.onmouseover = function () {nextRow.style.backgroundColor = "yellowgreen";}nextRow.onmouseout = function () {nextRow.style.backgroundColor = "white"}table.appendChild(nextRow);
}var all = document.getElementById("all");
all.onclick = function () {var checkboxList = document.getElementsByClassName("cbox");for (var i = 0; i < checkboxList.length; i++) {var box = checkboxList[i];if (!box.checked) {box.click();}}
}document.getElementById("empty").onclick = function () {var checkboxList = document.getElementsByClassName("cbox");for (var i = 0; i < checkboxList.length; i++) {var box = checkboxList[i];if (box.checked) {box.click();}}
}document.getElementById("arcall").onclick = function () {var checkboxList = document.getElementsByClassName("cbox");for (var i = 0; i < checkboxList.length; i++) {checkboxList[i].click();}
}

JavaScript简单的学生信息管理相关推荐

【学生网页作业】航海王动漫网页 html+ css + JavaScript 简单的学生网页作业源码
学生信息管理页面HTML+CSS+JavaScript基础开发
简单的学生信息表页面需求分析: HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8& ...
实践hibernate的应用——struts2+hibernate的简单学生信息管理
struts2+hibernate的简单学生信息管理,没有用很好的界面,目的主要是为了实践一下hibernate框架的学习,深入了解hibernate框架. 下面是项目的目录: 配置文件hiberna ...
html增加状态信息管理代码,JavaScript+HTML实现学生信息管理系统
一.前言用数组来存储所有学生对象的信息,实现了双向更新,初始时(数组内的对象信息"填充界面"),后面的界面操作可以更新数组内对象的信息(数量和本身数据域信息). 优点:JQuer ...
html写学生信息管理,vue实现简单学生信息管理案例
学生信息管理 #app{ margin: 10px; } 学号: 姓名: 搜索姓名关键字: 学号姓名添加时间操作 {{item.stuNo}}{{item.name}}{{item.cTime | d ...
用python制作一个学生信息管理软件_python实现简单学生信息管理系统
python简单的学生信息管理系统-文件版,供大家参考,具体内容如下功能如下主函数部分增加学生信息修改学生信息删除学生信息查询学生显示所有学生的信息将数据录入文件读取文件数据学习文 ...
php编写一个学生类_PHP实现简单的学生信息管理系统（web版）
(∩_∩) 1.概述学了php的一些基础,包括HTML,php,pdo,mysql操作等,一直都没有将它们有机结合.最近写了一个简单的网页版学生信息管理系统,前台用HTML,脚本用到了JavaScr ...
php学籍信息管理系统心得_PHP实现简单的学生信息管理系统（web版）
(∩_∩) 1.概述学了php的一些基础,包括HTML,php,pdo,mysql操作等,一直都没有将它们有机结合.最近写了一个简单的网页版学生信息管理系统,前台用HTML,脚本用到了JavaScr ...
springboot学生信息管理的设计与实现毕业设计源码191219
摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻挡的时尚潮流,人类发展的历史正进入一个新时代. ...

JavaScript简单的学生信息管理

界面样式

主要功能

代码部分

JavaScript简单的学生信息管理相关推荐

最新文章

热门文章