隔行换色（添加商品、删除、单纯的隔行换色）

隔行换色是一种常用的优化方法，可以提高表格、列表等页面元素的可读性和视觉效果。以下是一些可以优化隔行换色的方法：

1. 动态应用：使用 JavaScript 或 CSS 实现隔行换色，可以在用户进行交互操作时动态应用隔行换色，提高用户体验。

2. 用户选择：提供一个选项，让用户选择是否启用隔行换色功能。

3. 自适应性：根据不同设备和屏幕大小，调整隔行换色的方式和颜色，以获得最佳的可读性和美观度。

4. 色彩搭配：选择适合的颜色搭配，避免过于亮眼或对比过强的颜色，以免影响页面的可读性和美观度。

5. 有限变化：保持隔行换色的变化范围有限，不要过多变化，以免影响用户的阅读体验和视觉效果。

6. 可访问性：考虑盲人等无障碍用户的访问需求，确保隔行换色的方式和颜色对他们友好，如提供额外的文本标记、调整颜色对比度等。

综上所述，隔行换色是一种简单有效的优化方法，但在应用时需要考虑用户体验、设备适应性、颜色搭配、可访问性等多方面问题。

这样可以增加用户的体验感和视觉吸引力，提升网站的整体美感和品牌形象。比如，对于食品类商品，可以选择温暖和自然的颜色，如绿色、黄色和棕色；对于时尚类商品，可以选择明亮和鲜艳的颜色，如橙色、红色和紫色。另外，还可以根据网站的定位和用户群体的特征来选择适合的颜色方案。例如，面向年轻人的品牌可以选择鲜明的颜色，而面向中老年人的品牌则可以选择稳重和深沉的颜色。总之，选择适合的颜色方案可以使网站更加吸引人，并且让用户更容易关注和记忆。

这里展示两种方式的隔行换色，一种是用于工作、项目等，可以添加和删除，需要添加的工作内容，并具有层次感！

另一种是单存的隔行换色（字面意思），只是具有观赏性，不具备有添加、编辑等功能，接下来让我们一起走进代码的世界。

第一种：隔行换色（添加、删除功能）

css：

<style>
			table {
				width: 300px;
				border: 1px #525252 solid;
			}

			th,
			td {
				border: 1px #525252 solid;
				text-align: center;
			}
		</style>

HTML：

<table cellspacing="0">
			<thead>
				<tr>
					<th>序号</th>
					<th>内容</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>data</td>
					<td>
						<button>删除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<button id="but">添加行</button>

JS:

<script>
			// 获取添加行按钮标签
			let but = document.getElementById('but');

			// 获取thead标签
			let thead = document.getElementsByTagName('thead')[0];
			// 获取tbody标签
			let tbody = document.getElementsByTagName('tbody')[0];
			// 定义内容变量，表示为每一行显示的内容，初始为 100
			let content = 100;


			// 给添加行绑定点击事件{
			but.addEventListener('click', function() {

				// 通过thead标签获取内部tr
				let theadtr = document.getElementsByTagName('tr')[0];
				// 获取tr里th的数量
				let theadth = theadtr.getElementsByTagName('th');
				// 创建一个新的tr标签
				let newtr = document.createElement("tr");

				// 循环th的数量{
				for (let i = 0; i < theadth.length; i++) {

					// 创建td标签
					let newtd = document.createElement("td");
					// 通过tbody获取里边tr的数量,为了设置序号
					let tbodytr = tbody.children;
					// 判断i下标是否为0，是不是第一个td标签{
					if (i == 0) {

						// 让这个td标签的内容为 tr数量长度+1 定义序号
						newtd.innerHTML = tbodytr.length + 1

					}
					// } 

					// 判断i下标是否等于1 ，是否为第二个td{
					if (i == 1) {

						// 设置内容为 内容变量
						newtd.innerHTML = content;

						// 内容变量 += 100
						content += 100;

					}
					// } 

					// 判断i下标是否为th的长度-1  是否为最后一个{
					if (i == theadth.length - 1) {
						// 让这个td的内容为 "<button>删除</button>";
						newtd.innerHTML = "<button>删除</button>";
					}
					// } 

					// 把当前新创建的td标签添加到新的tr标签内
					newtr.appendChild(newtd);
				}
				// } 

				// 把这个新创建的tr添加到tbody标签内
				tbody.appendChild(newtr);

				// 调用隔行换色函数
				sutcolor();
			})
			// } 

			// 创建隔行换色函数{
			function sutcolor() {

				// 获取当前tbody内tr的数量，表示为有多少行
				let trs = tbody.children;

				// 循环行数{
				for (let i = 0; i < trs.length; i++) {

					// 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{
					if (i % 2 == 1) {

						// 给奇数这一行的颜色设置为粉色pink
						trs[i].style.backgroundColor = "pink";

					} else {
						// }else{
						// 否则设置为白色的
						trs[i].style.backgroundColor = "white";

					}
				}
			}

			// 给tbody绑定点击事件作为事件代理{
			tbody.addEventListener('click', function(e) {
				// 兼容IE获取event事件对象
				e = e || window.event;
				// 通过 event 事件对象获取事件源
				let target = e.target || e.scrElement;
				// 判断事件源内容是否 "删除" {
				if (target.innerHTML == "删除") {
					// 通过事件源获取父元素的父元素，也就是当前点击的这一行 tr
					let trs = target.parentElement.parentElement;

					// 删除这一行  父元素.removeChild(子元素) 
					// 父元素是tbody 子元素就是我没刚刚获取到的哪一行 tr
					tbody.removeChild(trs);

					// 调用序号排序函数
					issort();

					// 重新调用隔行换色函数
					sutcolor();

				}
			})

			// 创建序号排序函数{
			function issort() {

				// 一个tbody获取里边的tr，看看现在一共有多少行
				let istr = tbody.children;

				// 循环行数{
				for (let i = 0; i < istr.length; i++) {

					// 获取当前这一行里边的第一个td
					let istd = istr[i].children[0];

					// 修改这个td的内容为 i + 1，为了重新设定序号
					istd.innerHTML = i + 1;
				}
			}
		</script>

这就是第一种的方式，有不足的地方请大家多多指点！

第二种：隔行换色

css:

<style>
			.row {
				padding: 10px;
			}

			.even {
				background-color: lightgray;
			}
		</style>

HTML:

<table id="myTable">
			<tr class="row">
				<td>数据1</td>
			</tr>
			<tr class="row">
				<td>数据2</td>
			</tr>
			<tr class="row">
				<td>数据3</td>
			</tr>
			<tr class="row">
				<td>数据4</td>
			</tr>
			<tr class="row">
				<td>数据5</td>
			</tr>
			<tr class="row">
				<td>数据6</td>
			</tr>
			<tr class="row">
				<td>数据7</td>
			</tr>
			<tr class="row">
				<td>数据8</td>
			</tr>
			<tr class="row">
				<td>数据9</td>
			</tr>
			<tr class="row">
				<td>数据10</td>
			</tr>
			
			<!-- 更多数据行... -->
		</table>

JS:

<script>
			let table = document.getElementById('myTable');
			let rows = document.getElementsByClassName('row');

			for (let i = 0; i < rows.length; i++) {
				if (i % 2 === 1) {
					rows[i].classList.add('even');
				}
			}
		</script>