`

css隔行变色

htmljavascript 
阅读更多 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
<table id="tb">
	<tbody>
		<tr><td>第一行</td><td>第一行</td></tr>
		<tr><td>第二行</td><td>第二行</td></tr>
		<tr><td>第三行</td><td>第三行</td></tr>
		<tr><td>第四行</td><td>第四行</td></tr>
		<tr><td>第五行</td><td>第五行</td></tr>
		<tr><td>第六行</td><td>第六行</td></tr>
	</tbody>
	
</table>
<script type="text/javascript">
	var item = document.getElementById("tb");
	alert(item);
	var tbody = item.getElementsByTagName("tbody")[0];
	var trs = tbody.getElementsByTagName("tr");
	for(var i=0; i<trs.length; i++){
		if(i%2 == 0){
			trs[i].style.backgroundColor = "#888";
		}
}
</script>
</body>
</html>
分享到：
| json实例
评论
发表评论

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

相关推荐

    jquery选取商品隔行变色

    对于"隔行变色"，我们可以利用jQuery选择器来选取商品列表中的每一行，并通过CSS样式来改变颜色。 1. **HTML 结构** 商品列表通常以表格（`&lt;table&gt;`）或无序列表（`&lt;ul&gt;`）的形式呈现，每个商品作为一个单元格（`...

    CSS+JS实现table隔行变色

    在网页设计中，为了提升...综上所述，通过CSS和JavaScript的结合，我们可以轻松实现table隔行变色的效果，无论是静态页面还是动态内容，都能提供良好的阅读体验。在实际开发中，可以根据项目需求灵活选择合适的方法。

    实现表格的隔行变色

    隔行变色主要通过CSS（Cascading Style Sheets）来实现，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。我们可以通过CSS选择器来定位表格的行（tr）元素，并应用特定的背景颜色。 ### ...

    网页里面表格隔行变色代码

    在提供的文件"表格隔行变色.htm"中，很可能包含了以上代码示例的实际实现，你可以打开文件查看具体的HTML、CSS和JavaScript代码。理解这些基础知识对于任何Web开发者来说都是至关重要的，特别是在处理大量数据展示时...

    表格隔行变色

    "表格隔行变色"技术通常结合JavaScript和CSS来实现，同时也可能涉及到服务器端如JSP（JavaServer Pages）的技术应用。 1. **CSS基础应用**： CSS（层叠样式表）是用于定义网页元素外观的语言。在表格隔行变色中，...

    jquery table ui插件制作css表格隔行变色特效代码

    本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色效果的表格。 首先，`jQuery`是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画等功能。`Table UI`则是一类专门用于...

    纯CSS控制tabel隔行变色

    纯CSS控制tabel隔行变色，html文件一个，查看源码即可

    jQuery动态生成隔行变色的table

    本教程将详细介绍如何使用jQuery、CSS和JSON来动态生成具有隔行变色效果的表格。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在本场景中，我们将利用jQuery的便利性来动态...

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

    在IT领域，网页开发是不可或缺的一部分，而表单数据验证、表格隔行变色效果、复选框操作、好友列表以及省市菜单联动效果都是网页交互中的常见功能。这些功能不仅提升了用户体验，也是开发者必备的技能。下面将详细...

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery（简称JQ）库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示，通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    表格隔行变色，jquerys

    对于表格隔行变色，我们主要利用jQuery选择器和CSS样式来完成。 1. **基本步骤** - 引入jQuery库：在HTML文件中，我们需要引入jQuery库。通常，我们会通过CDN（内容分发网络）链接或本地文件路径来添加引用。例如...

    隔行变色鼠标移动变色表格

    CSS+JS 实现表格隔行变色 鼠标移动变色

    CSS2+JS实现table隔行变色

    总结起来，结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中，我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式；在JavaScript中，我们通过DOM操作动态地添加或移除这些样式类，确保...

    实用的隔行变色,支持3种颜色.rar

    虽然CSS通常足够处理隔行变色，但在某些情况下，可能需要通过JavaScript动态地改变颜色，尤其是当内容是动态加载或者表格行是在用户交互后添加时。压缩包中的"index.htm"可能包含了一个使用JavaScript的例子。通常...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    ### JavaScript表格隔行变色 #### 知识点1：JavaScript表格隔行变色基本原理 JavaScript表格隔行变色是一种常见的前端视觉效果，通过为表格中的行设置不同的背景颜色，使得用户浏览时能够更加容易地分辨不同的行。...

    g隔行变色.zip

    传统的CSS方法是通过`:nth-child()`选择器实现隔行变色。但是，由于JavaScript具有动态操作DOM的能力，我们可以实现更加灵活的效果。以下是一个使用JavaScript实现隔行变色的例子： ```html &lt;!DOCTYPE html&gt; ...

    隔行变色和鼠标滑过变色

    ### 隔行变色与鼠标滑过变色技术详解 在网页设计中，为了提升用户体验及美观性，经常会使用到隔行变色以及鼠标滑过时改变颜色的效果。这两种效果可以通过不同的技术来实现，包括使用`expression`（仅限于IE浏览器）...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    为了实现隔行变色，我们可以利用jQuery的选择器和CSS样式来完成。一般步骤如下： 1. 为表格的每个`&lt;tr&gt;`元素添加一个自定义类，例如`even`或`odd`，这可以通过循环遍历表格行并根据奇偶性动态添加。 2. 在CSS中定义...

    隔行颜色不同、隔行颜色不同

    总结来说，实现“隔行颜色不同”的效果主要依靠CSS的`:nth-child()`伪类选择器，以及jQuery提供的事件处理和DOM操作。这个技巧不仅提高了数据的可读性，还可以结合其他交互设计，提升用户体验。在实际项目中，可以...

    webpack基础使用,实现隔行变色效果

    在实现隔行变色效果时，我们可能需要使用 CSS预处理器，如 Sass 或 Less，或者直接在 JavaScript 中操作 DOM。这可能涉及到以下 Webpack 加载器： - **css-loader**：解析 CSS 文件，并将其转换为 JavaScript 模块...

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