`

表格 各行换色

表格各行换色 
阅读更多

 

<!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
踩
分享到：
| js控制行移动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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

Magicbox
Global site tag (gtag.js) - Google Analytics