`

表格 各行换色

阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>各行换色</title>
    <script type="text/javascript">
        function show() {
            var tab = document.getElementById("tab");
            var tr = tab.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                if (i % 2 == 0) {
                    tr[i].style.backgroundColor = "#ccc";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#ccc" }
                } else {
                    tr[i].style.backgroundColor = "#fff";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#fff" }
                }
            }
        }
        window.onload = show;
    </script>
</head>
<body>
    <table id="tab">
        <tr>
            <td>
                11111111111
            </td>
            <td>
                22222222222
            </td>
        </tr>
        <tr>
            <td>
                33333333333
            </td>
            <td>
                44444444444
            </td>
        </tr>
        <tr>
            <td>
               555555555555
            </td>
            <td>
                66666666666
            </td>
        </tr>
        <tr>
            <td>
                77777777777
            </td>
            <td>
                88888888888
            </td>
        </tr>
        <tr>
            <td>
                99999999999
            </td>
            <td>
                00000000000
            </td>
        </tr>
    </table>
</body>
</html>

 运行效果:

 

 

 

//update by 2012-11-26

唉,看了上面的JS,简直是一坨啊,附上一个JQuery的写法吧

$(function(){
		//各行换色
		$("tr:even").addClass("grey"); 
		$(".list").find("tr").mouseover(function(){
			  $(this).removeClass("grey");
			  $(this).addClass("select");
		});
		$(".list").find("tr").mouseout(function(){
			  $(this).removeClass("select");
			  $("tr:even").addClass("grey"); 
		});
	});

 

  • 大小: 9.8 KB
0
0
分享到:
评论

相关推荐

    razor table分页、隔行变色 table_pages_color_demo

    本示例“razor table分页、隔行变色 table_pages_color_demo”专注于如何在网页上展示数据,同时实现表格的分页功能和隔行变色效果,以提高用户体验。 首先,我们需要理解`razor`语法。Razor视图引擎的核心是`....

    表单数据验证_表格隔行变色效果_复选框的操作_好友列表_省市菜单联动效果

    这样,表格的每一行将交替显示不同的背景色,使得数据更易于区分。 **复选框的操作** 复选框在网页中用于让用户选择多个选项。通过JavaScript,我们可以实现复选框的各种交互,如全选/全不选、互斥选择(只能选择一...

    css+div控制表格 标签代码

    对于行的样式,可以使用`:nth-child()`伪类选择器,如`tr:nth-child(even)`和`tr:nth-child(odd)`来实现交替行的背景色。 此外,CSS还提供了`text-align`属性来控制单元格内容的水平对齐,如`text-align: center;`...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    这同样是通过为表格行添加mouseover和mouseout事件来实现的,利用jQuery的addClass和removeClass方法来动态地给行添加或移除“se”类,该类在CSS中定义了一个过渡色。 这段示例代码不仅展示了jQuery在操作DOM中的...

    swt自适应,隔行换色

    为表列添加排序功能,列适应表格宽度,添加光棒以及各行颜色差效果,背景颜色,隔行换色

    文档表格样式

    这些规则包括但不限于表格边框样式、单元格背景色、字体颜色与大小等。合理运用表格样式可以显著提升文档的专业度和可读性。 ### Word中的表格样式应用 #### 创建表格 1. **插入表格**:首先,在Word文档中插入一...

    JSP页面表格初始化

    - 设置列背景色:`setColumnColor`用于设置各列的背景颜色。 - 设置列宽调整功能:`enableResizing`方法控制用户是否能够调整列宽。 - **其他配置**: - `mandFields`数组用于标记哪些列为必填项。 - `popSet()`...

    HTML中表格的制作

    通过设置`border`、`background-color`、`color`等属性,可以调整表格边框、背景色和文字颜色。例如,给表格添加边框: ```css table { border-collapse: collapse; /* 合并边框 */ border: 1px solid black; } ...

    表格制作.pdf

    3. **选择行/列**:在HTML中,可以利用特定标记来选择和操作表格的行或列。 4. **表格属性**:包括边距(填充)、间距和对齐方式。边距是指单元格内容与边框的距离,间距则是单元格之间的距离。对齐方式分为表格...

    js做的可编辑的表格

    这可以是一个简单的JavaScript数组,每个数组元素代表一行,每个元素内部的子数组代表该行的各列数据。 3. **输入验证和更新**:在用户完成编辑后,我们需要验证新输入的数据,确保其符合预期格式,并更新数据模型...

    用excel做有计算功能的销售表格

    例如,设定规则使得销售额超过一定金额的行背景色变亮。 5. **使用数据验证**:为防止输入错误,可以设置数据验证规则,如限制销售数量只能为正整数,或者单价不能为负数。 6. **排序与过滤**:通过Excel的“数据...

    项目三word之表格制作与打印PPT学习教案.pptx

    如果需要确保行高和列宽一致,可以使用"平均分布各行"和"平均分布各列"的功能,这在制作规范的表格时非常有用。 此外,Word还支持将文本转换为表格,这对于处理结构化的文字信息非常方便。在打印时,如果表格较长,...

    word中如何给跨页的表格自动添加表头

    这包括边框、背景色、字体样式等设置,可以让你的表格看起来更加专业且易于阅读。 ### 三、技术原理解析 Word中的“重复标题行”功能实际上是基于文档的分页机制实现的。当Word遇到表格跨越多页的情况时,它会根据...

    Android开发之读取Excel表格数据

    在Android Studio项目中,我们通常把静态的非代码资源,如图片、音频、文本文件等,放入res目录下的各个子目录。对于Excel文件,我们可以将其放在assets或raw目录下,这两个目录允许我们存放任意类型的文件,且在...

    生成表格数据对应柱状图

    可以使用深浅不同的颜色来区分表格的行和列,以便用户更容易追踪数据。同时,高亮重要数据或异常值,比如使用背景色或边框,能帮助突出关键信息。在提供的链接中,...

    计算机软件及应用word表格制作及应用PPT学习教案.pptx

    此外,表格的样式和格式化也是编辑的重要部分,包括设置边框样式、颜色、粗细,以及单元格的填充色、文字对齐方式等。 美化表格是提高文档视觉效果的关键步骤。Word提供了多种内置样式供你选择,可以一键应用到整个...

    wpf控件库重写美化了各控件,如按钮、表格等

    例如,对于表格(DataGrid),可以定制行和列的样式,添加边框、背景色,甚至定义单元格的交互效果。对于按钮,可以设计新的鼠标悬停、按下状态的视觉效果。 3. **资源字典**:为了实现代码复用,开发者通常会将...

    网页表格特效大集合(附源码)

    -- 在此处根据原表格结构调整各单元格的高度和宽度 --&gt; ``` 需要注意的是,这种方法在不同浏览器中可能显示效果不一致,因为CSS3的`border-radius`属性可以更简单地实现圆角效果,但在旧版浏览器中可能不支持。因此...

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    废话不多说了,直接给大家贴代码了,具体代码如下所示: &lt;&#37;@ page language=java import=java.util.* pageEncoding=UTF-8%&gt; &lt;html&gt; &lt;head&gt; &lt;!-- 引入的css压缩文件 --&gt;...tabl

Global site tag (gtag.js) - Google Analytics