使用纯js码2个实用功能banner图标切换和表格制作

“I can accept failure, but I can't acceptnot trying.”—— by Michael Jordan 　　
“我可以接受失败，但我不能接受放弃。” ——迈克尔•乔丹 　

banner图标切换

js原生：图片地址你们自己设置位置，相对位置或者绝对位置即可

 表格制作js

表格css :

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: grid;
	align-items: center;
	justify-content: center;
}

.container {
	width: 1100px;
	height: 350px;
	margin-top: 20px;
	display: flex;
	overflow: hidden;
}

.container-left {
	width: 300px;
	padding: 10px 15px;
	background: rgb(216, 195, 157);
}

.container-left input {
	width: 80%;
	min-height: 30px;
	outline: none;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	padding: 0 5px;
	border: 1px solid rgb(69, 126, 123);
}

.container-left button {
	border-radius: 5px;
	font-size: 16px;
	padding: 10px 25px;
	margin: 10px 20px;
	cursor: pointer;
}

.container-right {
	width: 600px;
	padding: 10px 15px;
	overflow-y: auto;
	background: rgb(160, 240, 178);

}

.container-right table {
	cursor: default;
	border: 1px solid #000;
}

.container-right table {
	width: 500px;
	text-align: center;
	margin: 20px 10px;
}

.container-right table thead td {
	color: #fff !important;
	background: rgb(73, 187, 58);
}

.container-right table tr td {
	height: 35px;
	font-size: 18px;
	color: #000;
	border: 1px solid #000;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-right table tr td button {
	padding: 3px 7px;
	cursor: pointer;
}

.container-right table tr td input {
	width: 50px;
	text-align: center;
}

.delete {
	color: #fff;
	background-color: #f00;
}

.change {
	background-color: #0f0;
}

.container-right table tr td span {
	cursor: pointer;
	text-align: center;
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background-color: antiquewhite;
}

.container-right table tr td span:hover {
	color: #fff;
	background-color: rgb(172, 163, 152);
}

.search {
	width: 200px;
	font-size: 16px;
	text-align: center;
	padding: 10px 5px;
	background-color: rgb(207, 183, 226);
}

.search input {
	width: 130px;
	height: 30px;
	background-color: snow;
	border: 1px solid rgb(80, 80, 80);
	outline: none;
}

表格js: 

//TODO 1.获取元素

// 获取存放数据位置的tbody标签
var tbody = document.querySelector('tbody');
// 获取输入数据区域的input的标签
var inputs = document.querySelectorAll('.container-left input');
// 获取触发添加功能的button按钮
var btn = document.querySelector('.btn');
// 获取触发清空表单的button按钮
var reset = document.querySelector('button[type=reset');
// 获取检索区域的搜索button按钮
var searchBtn = document.querySelector(".searchBtn");

// 设定序号初始值
var number = 0;

// 判断记录值
var flag = true;

// 定义空对象，存放输入数据
var message = {};

// 定义空数组，存放对象
var students = [];

// TODO 2.添加功能
btn.addEventListener('click', function () {
	// 输入框非空判断
	if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=
		null && inputs[
			2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null) {

		// 将输入的数据存入数组
		message = {
			"number": number,
			"name": inputs[0].value,
			"age": inputs[1].value,
			'sex': inputs[2].value,
			'id': inputs[3].value
		};

		// 调用去重函数
		clearMess();
		// 启用自动数据重置
		reset.click();
	} else {
		// 空数据提示
		alert("数据输入不完全，请重新输入数据");
	};

});

//TODO 去重函数
function clearMess() {
	if (students.length > 0) {
		for (var i = 0; i < students.length; i++) {
			if (students[i].id == message.id) {
				alert("键值重复，请重新输入");
				return false;
			};
		};
		students.push(message);
	} else {
		students.push(message);
	};
	//  调用回显函数
	innerMess();
};

// TODO 回显函数
function innerMess() {
	// 生成表格内容区域
	if (flag) {

		// 创建新的tr节点
		var trs = document.createElement('tr');
		tbody.appendChild(trs);

		// 每次创建一个tr，number+1
		number++;

		// 创建一个td，接收number值，赋予序号的含义
		var tdNum = document.createElement('td');
		tdNum.classList.add('nums');
		tdNum.innerHTML = number;
		trs.appendChild(tdNum);

		// 将输入框的值赋予到新创建的td
		for (var i = 0; i < inputs.length; i++) {
			var tds = document.createElement('td');
			tds.innerHTML = inputs[i].value;
			trs.appendChild(tds);
		};

		// 创建移除操作按钮 - 删除
		var deleteBtn = document.createElement('td');
		deleteBtn.innerHTML = `删除`;
		trs.appendChild(deleteBtn);

		// 创建修改操作按钮 - 修改
		var changeBtn = document.createElement('td');
		changeBtn.innerHTML = `修改`;
		trs.appendChild(changeBtn);

		// 创建数据移动按钮 - 移动
		var doingBtn = document.createElement('td');
		doingBtn.innerHTML = `↑
                                  ↓`;
		trs.appendChild(doingBtn);
	};
};

//TODO 删除函数
function deleteMess(element) {

	// 获取到当前标签的序号
	var deleteIndex = element.parentNode.parentNode;

	if (confirm("是否确认操作")) {
		//  先删除标签
		deleteIndex.remove();
		// 再根据序号删除数组中的对应数据
		for (var i = 0; i < students.length; i++) {
			if (students[i].id == deleteIndex.children[4].innerHTML) {
				students.splice(i, 1);
			}
		};
		alert('操作成功');
		var nums = document.querySelectorAll('.nums');

		// 删除行的同时，控制删除行以外行数序号的删减
		var index;
		if (nums.length > 0) {
			for (var i = 0; i < nums.length; i++) {
				index = i;
				var nums = document.querySelectorAll('.nums');
				nums[index].innerHTML = index + 1;
			};
		};
		console.log(students);
		number--;
	};
};

//TODO 修改函数
function changeMess(element) {

	var tds2 = element.parentNode.parentNode.children;

	for (var i = 1; i < tds2.length - 3; i++) {
		inputs[i - 1].value = tds2[i].innerHTML;
		inputs[3].setAttribute('disabled', 'true');
		tds2[i].innerHTML = ``;
	};
	tds2[4].children[0].setAttribute('disabled', 'true');

	element.parentNode.innerHTML = `更新`;
};

//TODO 更新函数
function updateMess(element) {

	var tdsInp = document.querySelectorAll('table input');

	var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);

	var tds3 = element.parentNode.parentNode.children;

	students.splice(firstNumber - 1, 1);

	for (var i = 0; i < students.length; i++) {
		if (students[i].id == tdsInp[3].value) {
			alert("键值重复，请重新输入");
			return false;
		};
	};

	var message2 = {
		"number": firstNumber - 1,
		"name": tdsInp[0].value,
		"age": tdsInp[1].value,
		"sex": tdsInp[2].value,
		"id": tdsInp[3].value
	};

	students.push(message2);

	for (var i = 0; i < tdsInp.length; i++) {
		tds3[i + 1].innerHTML = tdsInp[i].value;
	};
	inputs[3].removeAttribute('disabled');
	reset.click();

	element.parentNode.innerHTML = `修改`;

};

//TODO 查询函数
function searchMess(element) {
	var messageLens = document.querySelectorAll('tbody tr');
	var searchIpt = document.querySelector('.searchInp').value;
	for (var i = 0; i < messageLens.length; i++) {
		if (searchIpt == '' || searchIpt == null || searchIpt == undefined) {
			messageLens[i].style.display = '';
		} else {
			messageLens[i].style.display = 'none';
			for (var j = 1; j < messageLens[i].children.length - 3; j++) {
				if (searchIpt == messageLens[i].children[j].innerHTML) {
					messageLens[i].style.display = '';
				};
			};
		};
	};
};

// TODO 数据位置向上移动函数
function upMess(element) {
	var trsUp = document.querySelectorAll('tbody tr');

	if (element.parentNode.parentNode.children[0].innerHTML == 1) {
		alert("移动失败，数据无法再向上移动");
	} else {
		for (var i = 1; i <= 4; i++) {
			var temps = element.parentNode.parentNode.children[i].innerHTML;
			element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.previousElementSibling
				.children[i].innerHTML;
			element.parentNode.parentNode.previousElementSibling.children[i].innerHTML = temps;
		};
	};
};

// TODO 数据位置向下移动函数
function downMess(element) {
	if (element.parentNode.parentNode.children[0].innerHTML == students.length) {
		alert("移动失败，数据无法再向下移动");
	} else {
		for (var i = 1; i <= 4; i++) {
			var temps2 = element.parentNode.parentNode.children[i].innerHTML;
			element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.nextElementSibling
				.children[i].innerHTML;
			element.parentNode.parentNode.nextElementSibling.children[i].innerHTML = temps2;
		};
	};
};

表格HTML：

	
	
	
	
	



	
点击添加学生信息
	

		

			
信息检索
			

				
				搜索
			
		
		

			
信息输入
			

				姓名：
				
				年龄：
				
				性别：
				
				学号：
				
				添加
				重置
			

		
		

			
信息显示
			

				

					
序号
					
姓名
					
年龄
					
性别
					
学号
					
移除
					
修改
					
移动