JavaScript实现动态表格行高亮与展开/折叠功能

本篇文章主要介绍了如何在JavaScript中实现一个表格的展开与闭合效果，并且配合CSS实现隔行换背景色的功能。这个功能主要是通过HTML、CSS和JavaScript的交互来完成的。 首先，我们来看HTML部分。表格（`<table>`）被定义为带有蓝色边框的样式，每个单元格（`<td>`）具有双层边框，内部背景颜色为浅蓝（#00ccff）。为了实现可展开/折叠的内容，每个单元格还包含一个隐藏的`<div>`元素（`<td div>`），默认情况下其背景颜色设置为浅绿（#66ffcc），使用`display:none`隐藏。 CSS中定义了三种不同类别的背景色：`.one`（绿色，#33ffcc）、`.two`（黄色，#ffff66）和`.over`（浅黄绿色，#ccff66），这将用于后续的隔行背景色切换。 JavaScript函数`list2()`是实现关键逻辑的部分。它接收事件对象`event`，并从中获取触发操作的元素（`srcElement`）。然后，它定位到当前单元格的父节点和对应的`<div>`元素。函数遍历所有的`<div>`元素，当找到目标`<div>`时，根据其当前的`className`值进行操作：如果已经是`open`，则将其改为`close`，反之亦然。非目标`<div>`保持`close`状态。 HTML中的链接元素（`<a>`）使用`onclick`属性调用`list2()`函数，当用户点击链接时，表格中的`<div>`元素会根据函数的处理改变显示状态。这样，点击单元格时，其内部的内容会呈现或隐藏，同时相邻行的背景颜色会按照`.one`、`.two`和`.over`的顺序循环替换。 总结来说，这篇文章展示了如何使用JavaScript和CSS配合，实现在表格单元格上点击展开/关闭隐藏内容，并根据行数改变背景颜色的效果。这对于动态展示数据、增强用户体验的网页设计中非常实用。开发者可以借此学习如何利用JavaScript处理DOM元素以及CSS样式控制页面布局。