布局 (有问题就把图片的路径换一下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.message {
width: 1000px;
margin: 0px auto;
background-color: #eee;
padding: 20px 10px;
}
.face-active {
border: 5px solid red;
}
</style>
</head>
<body>
<div class="message" id="message">
<!-- <form> -->
<!-- 标题 -->
<h2>添加员工信息</h2>
<!-- 信息 -->
<p>
<label for="uname">姓名:</label>
<input type="text" name="uname" id="uname" placeholder="请输入姓名">
</p>
<p class="face">
个人头像:
<img src="images/face.gif" alt="" class="face-active">
<img src="images/face3.gif" alt="">
<img src="images/face5.gif" alt="">
<img src="images/face7.gif" alt="">
</p>
<p id="usex">
<label for="">性别:</label>
<input type="radio" name="usex" class="usex" value="1" checked>男
<input type="radio" name="usex" class="usex" value="0">女
<input type="radio" name="usex" class="usex" value="0.5">人妖
</p>
<p id='uhobby'>
<label for="">兴趣:</label>
<input type="checkbox" name="uhobby" value="吃" checked>吃
<input type="checkbox" name="uhobby" value="喝">喝
<input type="checkbox" name="uhobby" value="玩" checked>玩
<input type="checkbox" name="uhobby" value="乐">乐
</p>
<p>
<label for="">身份证号:</label>
<input type="text" name="idCard" id="idCard" placeholder="请输入身份证号" maxlength="18">
</p>
<p>
简介:
<textarea name="introduce" id="txtarea" cols="40" rows="5" maxlength="20"></textarea>
<strong> 还剩<i id="leftNum">20</i>个字</strong>
</p>
<p>
<button id="doSubmit">提交数据</button>
<button id="delSelected">删除所选</button>
<button id="delAll">全部删除</button>
</p>
<!-- </form> -->
<!-- 展示员工信息 -->
<table border="1" cellspacing="0" cellpadding="5" width="1000">
<thead>
<tr>
<th>
<input type="checkbox" name="" id="selectAll">
全选
</th>
<th>编号</th>
<th>头像</th>
<th>姓名</th>
<th>性别</th>
<th>兴趣</th>
<th>身份证号码</th>
<th>个人简介</th>
<th>提交时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>10001</td>
<td>
<img src="images/face.gif" alt="">
</td>
<td>马晨晨</td>
<td>非公</td>
<td>好男</td>
<td>1111111111111111111</td>
<td>除了丑,哥们一无所有!。。。</td>
<td>2021-06-21 15:33:01</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>10001</td>
<td>
<img src="images/face.gif" alt="">
</td>
<td>马晨晨</td>
<td>非公</td>
<td>好男</td>
<td>1111111111111111111</td>
<td>除了丑,哥们一无所有!。。。</td>
<td>2021-06-21 15:33:01</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>10001</td>
<td>
<img src="images/face.gif" alt="">
</td>
<td>马晨晨</td>
<td>非公</td>
<td>好男</td>
<td>1111111111111111111</td>
<td>除了丑,哥们一无所有!。。。</td>
<td>2021-06-21 15:33:01</td>
<td>
<a href="#">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="10">
目前 <strong id="sum">10</strong>条数据
</th>
</tr>
</tfoot>
</table>
</div>
</body>
<script src="js/index.js"></script>
</html>
js操作
/*
先哪个功能?先做简单==>哪些简单?==高亮简单?==>1个事件影响1个元素
事件数 影响元素的个数
1 1
1 多
多个 1 计数功能---封装函数
多个 多个元素--多-->1(下标)-->多
图片高亮 1个点击 改变 2个图片元素
*/
var oMsg = document.querySelector('#message');
var aImg = oMsg.querySelectorAll('.face>img');
var oTxta = oMsg.querySelector('#txtarea');
var oDelAll = oMsg.querySelector('#delAll');
var oTbody = oMsg.querySelector('table>tbody');
var oSelAll = oMsg.querySelector('#selectAll');
var oDelSel = oMsg.querySelector('#delSelected');
var oDoSubmit = oMsg.querySelector('#doSubmit');
var num = 10000;//用于保存最新编号
var selectedFace = "images/face.gif";//用于保存用户选中头像地址
var oIdCard = oMsg.querySelector('#idCard');
var left = oMsg.querySelector('#leftNum');
var oSum = oMsg.querySelector('#sum');
//多个事件 影响 1个元素(封装函数)
//功能8:计数功能
/*
影响计数功能的因素:页面加载完成/发布/单删/全删/选删
封装函数:函数三要素:
作用:计算tbody中tr的数量,并且更新oSum的内容
参数:无
返回值:无
*/
function getTrNum() {
//计算tbody中tr的数量
var num = oMsg.querySelectorAll('tbody>tr').length;
//更新oSum的内容
oSum.innerHTML = num;
}
//页面加载完成,计算
getTrNum()
//功能9:反选功能
/*
业务逻辑:当于点击tbody中复选框,当tbody中复选框的数量 和 tbody中被选中的复选框的数量 一致 的时候,thead中全选按钮被选中,
否则不被选中
所有动态添加的元素,绑定事件,都需要使用事件委派
*/
// oTbody.addEventListener('click', function (ev) {
// var target = ev.target;
// if (target.nodeName.toLowerCase() == 'input') {
// //1.计算tbody中复选框的数量
// var checkNum = oTbody.children.length
// //2.计算tbody中被选中的复选框的数量
// var checkedNum = oTbody.querySelectorAll(":checked").length;
// // console.log(checkNum, checkedNum)
// if(checkNum == checkedNum){
// //全选按钮被选中
// oSelAll.checked = true;
// }else{
// //全选按钮取消被选中
// oSelAll.checked = false;
// }
// }
// })
//1个事件 影响 多个元素
//功能6:发布
oDoSubmit.onclick = function () {
//1.获取用户输入的信息
//1.1编号自增
num++;
//1.2获取用户名
var uname = oMsg.querySelector('#uname')
var nameVal = uname.value.trim();
//非空判断
if (!nameVal.length) {
alert("姓名不能为空,请输入姓名");
return false;//禁止代码继续往下执行
}
//1.3获取单选值
var usex = oMsg.querySelector("#usex>:checked").value;
usex = usex == "1" ? "男"
: usex == "0" ? "女"
: "人妖";
//1.4获取多选框值
var aHobby = oMsg.querySelectorAll('#uhobby>:checked');
var sHobby = "";
for (var i = 0, len = aHobby.length; i < len; i++) {
sHobby += aHobby[i].value + " "
}
//1.5获取加密后的身份证
//1.5.1获取用户输入的身份证号
var idCard = oIdCard.value.trim();
//非空判断
if (!idCard.length) {
alert("身份证号不能为空,请输入身份证号");
return false;//禁止代码继续往下执行
}
//长度非18位提示
if (idCard.length !== 18) {
alert('身份证号只能是18位,请输入身份证号')
return false;//禁止代码继续往下执行
}
// 需求:4)列表中的身份证号码后四位使用****代替(20分)
//1234567890 12345678 ==》1234567890 1234****
//字符串截取
// var idVal = idCard.slice(0,14) + "****"
//3)需求:身份证号码倒数第二位使用*代替(20分)
//1234567890123456 * 8
//方式一:将身份证号看成三部分:前16位、*、最后一位
var idVal = idCard.substr(0, 16) + "*" + idCard[17]
//方式二:转数组
//1.6获取简介
var intrVal = oTxta.value.trim();
//非空判断
if (!intrVal.length) {
alert("简介不能为空,请输入简介");
return false;//禁止代码继续往下执行
}
//2.字符串拼接tr
var sTr = `
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>${num}</td>
<td>
<img src="${selectedFace}" alt="">
</td>
<td>${nameVal}</td>
<td>${usex}</td>
<td>${sHobby}</td>
<td>${idVal}</td>
<td>${intrVal}</td>
<td>${new Date().toLocaleString()}</td>
<td>
<a href="#">删除</a>
</td>
</tr>
`
//3.tbody内部前插(追加)
oTbody.innerHTML = sTr + oTbody.innerHTML;
// oTbody.insertAdjacentHTML("afterbegin",sTr)
//#region
/* var oTr = document.createElement('tr');
oTr.innerHTML = `
<td><input type="checkbox" name="" id=""></td>
<td>10002</td>
<td>
<img src="images/face.gif" alt="">
</td>
<td>马晨晨</td>
<td>非公</td>
<td>好男</td>
<td>1111111111111111111</td>
<td>除了丑,哥们一无所有!。。。</td>
<td>2021-06-21 15:33:01</td>
<td>
<a href="#">删除</a>
</td>
`
oTbody.insertBefore(oTr,oTbody.children[0]) */
//#endregion
//4.清空输入框
uname.value = "";
oIdCard.value = "";
oTxta.value = "";
//5.初始化剩余字数
var maxlen = oTxta.maxLength;
left.innerHTML = maxlen;
//6.计算条数
getTrNum()
}
//功能5:全选/全不选
/* 获取thead中复选框的checked属性值,将获取的值赋给tbody中所有复选框 */
oSelAll.onchange = function () {
//1.获取thead中复选框的checked属性值
// var checked = this.checked;
//将获取的值赋给tbody中所有复选框
//2.通过属性选择器,获取tbody中所有的复选框
var aTbodychkbox = oTbody.querySelectorAll('[type="checkbox"]')
for (var i = 0, len = aTbodychkbox.length; i < len; i++) {
aTbodychkbox[i].checked = this.checked
}
}
//功能7:删除所选
oDelSel.onclick = function () {
//1.通过伪类选择器,获取tbody中被选中的复选框
var aTbChecked = oTbody.querySelectorAll(':checked');
//2.获取到所有被选中复选框所在的tr,并删除
for (var i = 0, len = aTbChecked.length; i < len; i++) {
aTbChecked[i].parentElement.parentElement.remove()
}
//6.计算条数
getTrNum()
}
// 1个事件影响1个元素
//功能1:点击图片,切换高亮
for (var i = 0, len = aImg.length; i < len; i++) {
aImg[i].onclick = function () {
//排他
var activeImg = oMsg.querySelector('.face-active');
activeImg.classList.remove('face-active');
//让当前被点击的图片高亮--添加类名face-active
this.classList.add('face-active');
//保存用户选中的头像地址
selectedFace = this.getAttribute('src');
}
}
//功能2:键盘抬起,计算剩余字数
oTxta.onkeyup = function () {
//3.1获取用户输入内容的长度
var uNum = this.value.trim().length;
//3.2最大允许输入长度
// var maxlen = this.getAttribute('maxLength') - 0;
var maxlen = this.maxLength - 0;
//3.3求1和2的差值
var diff = (maxlen - uNum) < 0 ? 0 : (maxlen - uNum)
//3.4更新剩余字数
left.innerHTML = diff
}
//功能3:全删
oDelAll.onclick = function () {
oTbody.innerHTML = ""
// oTbody.children.remove();
// oTbody.removeChild(oTbody.children)
//6.计算条数
getTrNum()
}
//功能4:单删---事件委派
//功能9:反选功能
oTbody.addEventListener('click', function (ev) {
//获取触发事件的元素
var target = ev.target;
//单删功能
//只有点击a标签时,才能删除所在的tr
if (target.nodeName.toLowerCase() == 'a') {
target.parentElement.parentElement.remove()
//6.计算条数
getTrNum()
}
//反选功能
if (target.nodeName.toLowerCase() == 'input') {
//1.计算tbody中复选框的数量
var checkNum = oTbody.children.length
//2.计算tbody中被选中的复选框的数量
var checkedNum = oTbody.querySelectorAll(":checked").length;
// console.log(checkNum, checkedNum)
if(checkNum == checkedNum){
//全选按钮被选中
oSelAll.checked = true;
}else{
//全选按钮取消被选中
oSelAll.checked = false;
}
}
})