用JavaScript实现信息输入，能实现输入用户姓名和学号添加内容，并且点击全选按钮来清空信息，点击删除时能够删除所选内容，以及点击搜索按钮，使其能进行变色，要求序号自增长
实现信息输入
1. 添加用户名，学号，和性别选择
2. 序号能实现自增长
3. 实现全选和反选功能
4.实现删除功能
5.点击搜索变色使其相对应元素进行变色功能*
- CSS样式
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 800px;
margin: 0 auto;
}
.box {
width: 800px;
background-color: #6495ED;
text-align: center;
padding-top: 20px;
color: white;
}
p {
margin: 15px 0;
}
#btn {
width: 150px;
height: 30px;
background-color: #40E0D0;
color: white;
line-height: 30px;
text-align: center;
border: 0;
}
.show {
width: 800px;
}
th {
width: 110px;
text-align: center;
background-color: #97B6F0;
color: white;
}
tr{
background-color: #D8BFD8;
}
td {
width: 110px;
text-align: center;
}
</style>
- body部分
<div class="wrap">
<div class="box">
<p>姓名：<input type="text" id="stuName"></p>
<p>学号：<input type="text" id="stuNum"></p>
<p>性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女</p>
<p>
<input type="button" value="添加" id="btn" onclick="add()">
<input type="button" value="全部删除" id="btn" onclick="delAll()">
<input type="button" value="选中删除" id="btn" onclick="delCk()">
</p>
<input type="text" id="txt"><input type="button" value="搜索变色" id="search">
</div>
<div class="show">
<table id="tab">
<thead>
<tr>
<th><input type="checkbox" onclick="allck()" id="ckAll">全选</th>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td><input type="checkbox" name="ck" onclick="ckCk()"></td>
<td>1</td>
<td>武文亚</td>
<td>09</td>
<td>女</td>
<td>2020/05/12</td>
<td><a href="#" onclick="del(this)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
- script部分
<script>
//获取元素
var stuName = document.getElementById('stuName');
var stuNum = document.getElementById('stuNum');
var sexs = document.getElementsByName('sex');
var tab = document.getElementById('tab');
var cks = document.getElementsByName('ck');
var ckAll = document.getElementById('ckAll');
var nums = document.getElementsByName('nums');
var tbd = document.getElementById('tbd');
var trs = tbd.getElementsByTagName('tr');
var txt = document.getElementById('txt');
var search = document.getElementById('search');
//搜索
search.onclick = function () {
for (var i = 0; i < trs.length; i++) {
if (trs[i].children[2].innerHTML == txt.value) {
trs[i].style.backgroundColor = 'yellow';
}
}
}
//性别选择
function sexsCk() {
for (var i = 0; i < sexs.length; i++) {
if (sexs[0].checked == true) {
return '男';
} else {
return '女';
}
}
}
//日期时间
function daTe(){
var dt = new Date();
var year = dt.getFullYear();
var month = dt.getMonth();
var day = dt.getDate();
year = year < 10 ? '0' + year : year;
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
return x = '' + year + '/' + month + '/' + day ;
}
//自增序号
function zizeng() {
for (var i = 0; i < trs.length; i++) {
trs[i].children[1].innerText = i + 1;
}
}
//单行删除
function del(e) {
e.parentElement.parentElement.remove();
zizeng();
}
//添加方法
function add() {
//创建突然元素
var tr = document.createElement('tr');
//tr元素添加内容
tr.innerHTML = '' + zizeng() + ' ' +
'' + stuName.value + ' ' +
'' + stuNum.value + ' ' +
'' + sexsCk() + ' ' +
'' + daTe() + ' ' +
'删除 '
tab.lastElementChild.appendChild(tr);
//清空文本框
stuName.value = '';
stuNum.value = '';
//调用自增函数
zizeng();
}
//全选/反选
function allck() {
//循环遍历，找出每一个小的复选框
for (var i = 0; i < cks.length; i++) {
cks[i].checked = ckAll.checked;
}
}
function ckCk() {
// 循环遍历，找出每一个小的复选框
for (var i = 0; i < cks.length; i++) {
// 判断小的复选框的checked的值，如果有一个值为false,全选的checked的值就为false
if (cks[i].checked == false) {
ckAll.checked = false;
return;
}
}
// 每一个小的复选框，checked都为true，那么全选的checked的值就为true
ckAll.checked = true;
}
//全部删除
function delAll() {
// tab.lastElementChild.remove();
// tab.lastElementChild.innerHTML = '';
for (var i = cks.length - 1; i >= 0; i--) {
cks[i].parentElement.parentElement.remove();
}
}
//选中删除
function delCk() {
//遍历每一个小复选框，如果checked的值为true,说明被选中,那就删除它所在的一行trs
// for(var i=0;i
// if(cks[i].checked == true){
// cks[i].parentElement.parentElement.remove();
// i--;
// }
// }
//从后往前删
for (var i = cks.length - 1; i >= 0; i--) {
if (cks[i].checked == true) {
cks[i].parentElement.parentElement.remove();
}
}
}
</script>