隔行换色是一种常用的优化方法，可以提高表格、列表等页面元素的可读性和视觉效果。以下是一些可以优化隔行换色的方法：
- 动态应用：使用 JavaScript 或 CSS 实现隔行换色，可以在用户进行交互操作时动态应用隔行换色，提高用户体验。
- 用户选择：提供一个选项，让用户选择是否启用隔行换色功能。
- 自适应性：根据不同设备和屏幕大小，调整隔行换色的方式和颜色，以获得最佳的可读性和美观度。
- 色彩搭配：选择适合的颜色搭配，避免过于亮眼或对比过强的颜色，以免影响页面的可读性和美观度。
- 有限变化：保持隔行换色的变化范围有限，不要过多变化，以免影响用户的阅读体验和视觉效果。
- 可访问性：考虑盲人等无障碍用户的访问需求，确保隔行换色的方式和颜色对他们友好，如提供额外的文本标记、调整颜色对比度等。
综上所述，隔行换色是一种简单有效的优化方法，但在应用时需要考虑用户体验、设备适应性、颜色搭配、可访问性等多方面问题。
这样可以增加用户的体验感和视觉吸引力，提升网站的整体美感和品牌形象。比如，对于食品类商品，可以选择温暖和自然的颜色，如绿色、黄色和棕色；对于时尚类商品，可以选择明亮和鲜艳的颜色，如橙色、红色和紫色。另外，还可以根据网站的定位和用户群体的特征来选择适合的颜色方案。例如，面向年轻人的品牌可以选择鲜明的颜色，而面向中老年人的品牌则可以选择稳重和深沉的颜色。总之，选择适合的颜色方案可以使网站更加吸引人，并且让用户更容易关注和记忆。
这里展示两种方式的隔行换色，一种是用于工作、项目等，可以添加和删除，需要添加的工作内容，并具有层次感！
另一种是单存的隔行换色（字面意思），只是具有观赏性，不具备有添加、编辑等功能，接下来让我们一起走进代码的世界。
第一种：隔行换色（添加、删除功能）
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>
