页面样式
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]);
//初始化messageList
var 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);
//清空value
nameboxEle.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中如何体现