js学习--隔行换色

隔行换色制作

复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			td {
				width: 80px;
				height: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<thead>
				<tr>
					<th>序号</th>
					<th>内容</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>100</td>
					<td><button>删除</button></td>
				</tr>
			</tbody>
		</table>
		<button class="add">添加行</button>
		<script>
			//获取添加行的按钮
			let add = document.getElementsByClassName('add')[0];
			//获取第一个tr
			let row = document.getElementsByTagName('tr')[0];
			//获取表格的身体部分
			let tbody = document.getElementsByTagName('tbody')[0];
			//获取表格里面的td
			let td = document.getElementsByTagName('td');
			//设置一个变量为100
			let num = 100;
			//给添加行的按钮添加一个点击事件
			add.onclick = function() {
					//创建一个新的tr标签
				let newtr = document.createElement('tr');
				//创建一个新的td标签
				let newtd = document.createElement('td');
				//把创建的td标签放到新创建的tr标签里面
				newtr.appendChild(newtd);
				//在创建一个新的td标签
				let data = document.createElement('td');
				//每次添加都让num+100
				num += 100;
				//把变量插入到新建的td里面
				data.innerHTML = num;
				//在把新建的td插入到tr里面
				newtr.appendChild(data);
				//在创建一个td标签
				let but_td = document.createElement('td');
				//在创建一个按钮
				let btn = document.createElement('button');
				//在往新建的按钮里面插入字符串
				btn.innerHTML = '删除';
				//打印新的tr
				console.log(newtr);
				//把新建的按钮插入到新建的td里面
				but_td.appendChild(btn);
				//在把新建的td插入到tr标签里面
				newtr.appendChild(but_td);
				//在把tr插入到表格的身体里面
				tbody.appendChild(newtr);
				//排序和换色函数
				sort();
			}
			//排序和换色函数
			function sort() {
				//创建一个变量它包含的是表格身体里面的子元素
				let trs = tbody.children;
				//for循环的运行次数是看表格身体里面有几个子元素
				for (let i = 0; i < trs.length; i++) {
					//创建一个变量让循环改变一行的第一个td里面的对西
					let istd = trs[i].children[0];
					//然后把刚才生成的变量插入的HTML里面每次运行是当前循环次数+1
					istd.innerHTML = i + 1;
					//判断i%2是否=0,如果为0这一行颜色为白色
					if (i % 2 == 0) {
						trs[i].style.background = 'white';
					} else {
						//否则为粉色
						trs[i].style.background = 'pink';
					}
				}
			}
			//给表格身体绑一个监听函数
			tbody.addEventListener('click', function(e) {
				//设置一个变量,等于e的子元素
				let target = e.target;
				//打印变量看看是否能用有没有报错
				console.log(target);
				//判断变量里面的内容是否为删除
				if (target.innerHTML == '删除') {
					//打印看是否运行
					console.log(1);
					//如果是就找它的爷爷
					let istr = target.parentElement.parentElement;
					//打印看是否执行
					console.log(istr);
					//在表格身体里面点击删除一行
					tbody.removeChild(istr);
				}
				//排序和换色函数
				sort();
			})
		</script>
	</body>
</html>
相关推荐
Filotimo_2 小时前
2.CSS3.(2).html
前端·css
yinuo3 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip4 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
Pluchon4 小时前
硅基计划4.0 算法 字符串
java·数据结构·学习·算法
折翅鵬4 小时前
Android 程序员如何系统学习 MQTT
android·学习
前端橙一陈5 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~5 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技015 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio6 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
拾贰_C7 小时前
【pycharm---pytorch】pycharm配置以及pytorch学习
pytorch·学习·pycharm