一、效果展示
二、HTML布局
姓名:<input type="text"> 分数：<input type="text"> <input type="button" value="添加" class="btn1">
<p>学生信息：</p>
<ul></ul>
<input type="button" value="查找及格的学生" class="btn2">
<p>及格学生如下:</p>
<ul></ul>
写html主要实现基本样式，如下图，由于做的简单的样式图图，就没有用css写样式：
三、JavaScript部分
1.获取元素
获取html中的定义元素，然后再JavaScript中修改其中属性；
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let inputs = document.querySelectorAll('input');
let ul = document.querySelectorAll('ul');
let arr = [];
2.输入信息
设置点击事件给'添加'按钮，再通过for循环对输入数据进行字符串拼接，把输入的数据遍历在添加数据的内容里面。
btn1.addEventListener('click', function () {
arr.push({ realname: inputs[0].value, grade: inputs[1].value });
let str = '';
for (var i = 0; i < arr.length; i++) {
str = str + `<li>姓名：${arr[i].realname},分数：${arr[i].grade}</li>`;
}
inputs[0].value = '';主要用来将输入数据之后的文本框里的文字清楚。
ul[0].innerHTML = str;
inputs[0].value = '';
inputs[1].value = '';
ul.insertBefore(ul, ul.children[0]);
})
2.判断信息
把上面获取的元素信息进行判断再输入，来达到最后实现的效果。
首先添加点击事件，通过箭头函数判断分数大于等于60的数据，
把获取的元素赋给重新定义的数组，再重新遍历组成新数组，
最后通过join把数组转换为字符串输出数据。
btn2.addEventListener('click', function () {
let arr1 = arr.filter(item => item.grade >= 60);
let str1 = arr1.map(item => {
return `<li>姓名：${item.realname},分数：${item.grade}</li>`
})
ul[1].innerHTML = str1.join('');
四、完整代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
姓名:<input type="text"> 分数：<input type="text"> <input type="button" value="添加" class="btn1">
<p>学生信息：</p>
<ul></ul>
<input type="button" value="查找及格的学生" class="btn2">
<p>及格学生如下:</p>
<ul></ul>
<script>
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let inputs = document.querySelectorAll('input');
let ul = document.querySelectorAll('ul');
let arr = [];
btn1.addEventListener('click', function () {
arr.push({ realname: inputs[0].value, grade: inputs[1].value });
let str = '';
for (var i = 0; i < arr.length; i++) {
str = str + `<li>姓名：${arr[i].realname},分数：${arr[i].grade}</li>`;
}
ul[0].innerHTML = str;
inputs[0].value = '';
inputs[1].value = '';
ul.insertBefore(ul, ul.children[0]);
})
btn2.addEventListener('click', function () {
let arr1 = arr.filter(item => item.grade >= 60);
let str1 = arr1.map(item => {
return `<li>姓名：${item.realname},分数：${item.grade}</li>`
})
ul[1].innerHTML = str1.join('');
})
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/qq_65715980/article/details/125827136
版权归原作者 秃头小骡子 所有， 如有侵权，请联系我们删除。
版权归原作者 秃头小骡子 所有， 如有侵权，请联系我们删除。