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>