js 实现隔行幻色

构建界面：html：

<table cellspacing="0"><!-- 表格中的单元格设为0，没间距 -->
			<thead>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>操作</td>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>1</td>
					<td>data</td>
					<td><button>删除</button></td>
				</tr>
			</tbody>
		</table>
		<button class="addBut">添加</button>

js部分：

let addBut = document.getElementsByClassName('addBut')[0];
/* 获取添加按钮 为了添加事件 */
let tbody = document.querySelector('tbody');
/* 获取tbody为了对他进行操作 */
let data = 100;
/* 初始化data=100，为了让他自增 */

addBut.onclick = function() {
	/* 给addBut（添加按钮）添加点击事件 */
	let newTr = document.createElement('tr');
	/* 创建newTr（一个新的tr） */
	let newTd = document.createElement('td');
	/* 创建一个新的（创建第一个的Td单元格） */
	newTr.appendChild(newTd);
	/* 吧newTd插入到newTr里面   .前面被插入的*/
	let dataTd = document.createElement('td');
	/* 创建第二个td */
	data += 100;
	/* 给第二个单元格里面的数据 */
	dataTd.innerHTML = data;
	/* 吧 data的数据写到单元格里*/
	newTr.appendChild(dataTd);
	/* 吧dataTd插入到newTr */
	let operateTd = document.createElement('td');
	/* 创建第三个td单元格 */
	let tdButton = document.createElement('button');
	/* 创建一个新的删除按钮 */
	tdButton.innerHTML = '删除'
	/* 吧删除添加到新创建的tdButton删除按钮 */
	operateTd.appendChild(tdButton);
	/* tdButton插到opaerteTd */
	newTr.appendChild(operateTd);
	/* 吧operateTd插入到newTr中 */
	tbody.appendChild(newTr);
	/* 吧newTr插入到tbody里面 */
	call_color_idx();/* 序号 颜色 */
};

function call_color_idx() {/* 调用 */
	/* 吧颜色添加到点击事件里面 */
	let allTr = document.querySelectorAll('tr');
	/* 获取所有tr */
	// let setNumber = 1;
	/* 从序号1开始添加换色 */
	for (let i = 1; i < allTr.length; i++) {
		/* i<所有tr的长度 */
		if (i % 2 == 0) {
			/* 判断是否是偶数 */
			allTr[i].style.backgroundColor = '#AFEEEE';
			/* 如说是偶数allTr[i]就给他换颜色 */
		} else {
			allTr[i].style.backgroundColor = 'white';
			/* 如果是奇数就没有颜色 */
		}
		let Serial = allTr[i].querySelector('td:first-child');
		/* 创建一个序列号，＝所有tr的第一个 */
		if (Serial) {
			/* 判断序号 */
			Serial.innerHTML = i;
			/* 吧创建的序号给serial */
			// setNumber++;
			/* 加一行添加一个序号 */
		}
	}
};

//删除按钮
tbody.addEventListener('click', function(e) {
	/* 给删除按钮添加一个点击事件 */
	let targetElement = e.target;
	/* 获取被点击的元素 */
	if (targetElement.innerHTML == '删除') {
		/* 点击的元素是不是删除 */
		let tr = targetElement.parentElement.parentElement;
		/* 删除按钮在tr父元素中用了两次 */
		tbody.removeChild(tr);
		/* 在tbody中移除tr */
		call_color_idx();/* 序号 颜色 */
	}

})

css:css就更简单了，如下：

table {
	width: 15%;
	border-collapse: collapse;
}

th,
td {
	text-align: center;
	border: 1px solid black;
}

效果如下：