页面样式

html

    <header>学生信息管理</header><table id="tablebox" class="tablebox"><thead><th>姓名</th><th>年龄</th><th>班级</th></thead></table><form class="message-input"><input type="text" id="namebox" placeholder="请输入姓名" name="namebox"><input type="text" id="agebox" placeholder="请输入年龄" name="agebox"><select id="selectbox" name="select"><option selected="selected">请选择</option><option >软件一班</option><option >软件二班</option><option>软件三班</option></select><!-- <input id="submit" type="submit"></input> --><button type="button" id="submit">提交</button></form>

css

    * {margin: 0;padding: 0;}body {width: 800px;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}header {position: fixed;top: 0;text-align: center;width: 100%;height: 50px;line-height: 50px;font-size: 20px;background-color: rgba(180, 66, 37, 0.916);}#tablebox {margin-top: 70px;border: 1px solid #333;width: 800px;/* 去除单元格间隙 */border-collapse: collapse;}#tablebox thead th,#tablebox tr td {border: 1px solid #333;text-align: center;padding: 10px;}.message-input {margin-top: 70px;}#namebox,#agebox {height: 30px;border-radius: 4px;border: 1px solid rgb(143, 140, 140);text-align: center;outline-color: rgb(209, 75, 75);}.message-input select {height: 30px;border: 1px solid rgb(143, 140, 140);border-radius: 4px;cursor: pointer;color: gray;outline-color: rgb(209, 75, 75);}.message-input select option {color: #333;}.message-input #submit {width: 50px;height: 30px;border: none;border-radius: 4px;color: #fff;background-color: rgba(180, 66, 37, 0.916);cursor: pointer;}

js

<script>var tableboxEle = document.getElementsByClassName("tablebox")[0];var nameboxEle = document.getElementById("namebox");var ageboxEle = document.getElementById("agebox");var selectboxEle = document.getElementById("selectbox");var submitEle = document.getElementById("submit");//测试获取selectbox里面的内容// console.log(selectboxEle.text);// console.log(selectboxEle[2]);//初始化messageListvar messageList = [];var message = localStorage.getItem("messageList");messageList = message ? JSON.parse(localStorage.getItem("messageList")) : [];//for循环在页面输出for (var i = 0; i < messageList.length; i++) {tableboxEle.innerHTML += addMessageList(messageList[i].name, messageList[i].age, messageList[i].class);}// 提交点击事件submitEle.addEventListener('click', function() {getValue();})// 获取form表单里面输入的姓名和年龄以及选择的班级function getValue() {// 获取输入的姓名var nameValue = nameboxEle.value;if (!nameValue) {alert("请输入姓名");}console.log(nameValue);// 获取输入的年龄var ageValue = ageboxEle.value;if (!ageValue) {alert("请输入年龄");}console.log(ageValue);// 获取选择的班级//selectedIndex属性可设置或返回下拉列表被选选项的索引号var index = selectboxEle.selectedIndex;if (index == 0) {alert("请选择班级");}var classValue = selectboxEle[index].text;console.log(classValue);//清空valuenameboxEle.value = "";ageboxEle.value = "";selectboxEle.text = selectboxEle[0].text;//调用方法push进messaList数组中// addMessage(nameValue, ageValue, classValue);messageList.push({name: nameValue,age: ageValue,class: classValue})//调用方法存到表格格式中var list = addMessageList(nameValue, ageValue, classValue);console.log(list);//将messaList数组存储到本地localStorage.setItem("messageList", JSON.stringify(messageList));//for循环将表格格式的内容添加到页面中tableboxEle.innerHTML += list;}console.log(messageList);// 将相关信息添加到messageList中// function addMessage(nameValue, ageValue, classValue) {//     messageList.push({//             name: nameValue,//             age: ageValue,//             class: classValue//         })//         //将messaList数组存储到本地//     localStorage.setItem("messageList", JSON.stringify(messageList));// }//定义样式function addMessageList(nameValue, ageValue, classValue) {return `<tr><td>${nameValue}</td><td>${ageValue}</td><td>${classValue}</td></tr>`}
</script>

知识总结：

一： submit属于提交按钮，不需要绑定监听事件，button需要手动添加事件，作用范围广

（出现的问题：运用submit导致点击事件里面的方法都没办法实现）

二：有关获取下拉列表select选择的option的内容

<select id="select">

<option></option>

<option></option>

<option></option>

</select>

1.获取select对象

var a=document.getElementById("select");

2.获取选择的option的索引（selectedIndex属性可设置或返回下拉列表被选选项的索引号）

var index=a.selectedIndex;

3.获取被选中的option的text或者value

var text=a[index].text;

三、多个数据输入需要用<form></form>表单域将所有input表单包裹起来使彼此之间建立关联，可以通过设置id值与统一文档中的<form>建立关联，或者与任何存在的祖先<form>元素关联。

四、去除单元格间隙

border-collapse: collapse;

五、初始化列表的值为本地储存的列表，列表为空时会报错

var List = [];//初始化列表为空

var message = localStorage.getItem("messageList");//获取本地存储的列表

List = message ? JSON.parse(localStorage.getItem("messageList")) : [];//判断列表是否为空并初始化列表数值

六、思路：

1.获得所有所需对象

2.定义列表存储所需表单输入的内容

var messageList=({

name: "",

age: "",

class: ""

})

3.获取表单输入的内容

nameValue/ageValue/classValue

4.清除表单输入的内容

（注：不要将表单内容和获取的表单内容混淆）

5.将所获值存储到列表中

list.push({

name: nameValue,

age: ageValue,

class: classValue

})

（注：push()方法中的格式应和列表格式保持一致）

6.撰写一个方法，用来将数值按要求样式在页面输出,将前面所获得的数值运用字符串`${Str}`模板替换

function addMessageList(nameValue, ageValue, classValue) {

return `<tr>

<td>${nameValue}</td>

<td>${ageValue}</td>

<td>${classValue}</td>

</tr>`

}

7.调用样式方法获得样式字符串

var list=addMessageList(nameValue, ageValue, classValue);

8.将列表存储到本地

localStorage.setItem("list", JSON.stringify(list));

（注：此处要用到 JSON.stringift()将值转化为String类型，因为localStorage.setItem("String",String))

9.将7.中调用样式方法所获得的样式字符串在页面中渲染出来

tableboxEle.innerHTML += list;

（注：只有class类型的对象才能使用innerHTML）

10.定义点击事件方法

（1）input控件绑定onclick事件，定义onclick事件的方法，将以上除6以外的内容调用在该方法中

<input type="button" οnclick="getIndex()" >

getIndex(){

相关事件

}

（2）点击触发click或者change事件，运用addEventListener() 方法向指定元素添加事件句柄。

<button type="button" id="submit">提交</button>

var submitEle=document.getElementById("submit");

submitEle.addEventListener('click', function() {

相关事件

})

11.初始化列表（将列表内容替换成本地存储的列表数据）

var messageList = [];

var message = localStorage.getItem("messageList");

messageList = message ? JSON.parse(localStorage.getItem("messageList")) : [];

（注：localStorage.getItem("messageList")所获得的值为字符串，用JSON.parse()将其转换为数组）

12.for循环遍历列表

因为我们定义的列表格式并不是我们可以在页面上渲染出来的样式，所以需要将列表里的内容通过调用到步骤6中的内容中按照所需样式添加到列表中

for (var i = 0; i < messageList.length; i++) {

tableboxEle.innerHTML += addMessageList(messageList[i].name, messageList[i].age, messageList[i].class);

}

七、问题

2.下拉列表如何实现提交后返回原状

3.autocomplete=“off”在css中如何体现

原生js编写学生信息管理系统——添加学生信息相关推荐

java学籍管理系统课设报告,基于SSM+Redis+LayUI的大学生学籍信息管理系统-java学生学籍信息管理系统mysql数据源...
"基于SSM+Redis+LayUI的大学生学籍信息管理系统-java学生学籍信息管理系统mysql数据源 1.包含源程序,数据库脚本.代码和数据库脚本都有详细注释. 2.课题设计仅供参考学 ...
android 学生信息管理系统,android学生信息管理系统的报告.docx
android学生信息管理系统的报告基于Android的学生信息管理系统初探 [摘要]智能移动端迅猛发展,学生信息管理的数字化是教学透明的又一个重要体现,本文主要阐述基于基于Android的学生信息 ...
JAVA JSP学生信息档案管理系统JSP学生管理系统JSP学生档案管理系统JSP学生信息管理系统
JAVA JSP学生信息档案管理系统JSP学生管理系统JSP学生档案管理系统JSP学生信息管理系统 protected void doGet(HttpServletRequest req, HttpS ...
java考勤管理系统源码java学生考勤请假系统java学生考勤管理系统 java考勤系统java学生信息管理系统java学生管理系统
java考勤管理系统源码java学生考勤请假系统java学生考勤管理系统 java考勤系统java学生信息管理系统java学生管理系统 public Swingtest002() {// 设置标题se ...
原生js编写小米购物车
原生js编写小米购物车案例思路一.将数据渲染到下方ul中 1.遍历数据添加到li标签内二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
原生js编写的todos
原生js编写的todos 如果有什么问题,可以直接问我 <!DOCTYPE html> <html><head><meta charset="UTF ...
【HTML】原生js实现的图书馆管理系统
1.引言设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
android向apk的META-INF(签名信息)中添加渠道信息
作者:燕歆波导读:在没有源码的情况下,为了避免重新签名,直接在签名信息中添加渠道信息; 准备好两个文件:一个空文件"channel_fhxs"没有后缀名,还有一个.prepert ...

原生js编写学生信息管理系统——添加学生信息

html

css

js

知识总结：

原生js编写学生信息管理系统——添加学生信息相关推荐

最新文章

热门文章