<script type="text/javascript">
window.onload=function(){
var table=document.getElementById("tb");
var tboby=table[0];
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.color="#3333ff"; //设置偶数行字体的颜色
}else{
trs[i].style.background="#99ffff"; //设置奇数行的背景色
}
}
};
</script>
</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>
</body>
注: 设置行的背景色也可以这样写 trs[i].style.backgroundColor
="#99ffff";
//设置偶数行的背景色
下面是jquery实现相同的功能
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tb tbody tr:even").css("color","#3333ff");
$("#tb tbody tr:odd").css("background","#99ffff");
});
</script>
</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>
</body>
注: 这里当然也可以写
$("#tb tbody tr:odd").css("backgroundColor","#99ffff");
分享到：
相关推荐
CSS（层叠样式表）用于控制页面的布局和视觉效果，例如设置字体大小、颜色、背景色、边距等。在`css`文件中，可能会定义表格样式，如表头的背景色、单元格的对齐方式、鼠标悬停效果等，以增强用户体验。 为了实现...
例如，可能会定义表格的单元格间距、背景色、字体大小和颜色，以及高亮选中课程的样式。 而 `mycourse.js` 文件则是JavaScript代码，其中包含了实现课表绘制的核心逻辑。这部分代码可能包含以下几个部分： 1. **...
这些样式规则定义了表格头部的背景色、字体颜色，以及表格行的交替颜色、悬停状态颜色和排序状态的颜色。 2. jQuery操作数组实现排序的具体方法：文章描述了一种通过jQuery编写自定义的插件函数`alternateRowColors...
4. **CSS样式控制**：JavaScript可以配合CSS来改变表格的外观，如使用`style`属性设置单元格的背景色、字体大小等。还可以使用CSS3的动画效果，为表格的展开、收起等操作添加过渡效果。 5. **插件库应用**：有许多...
CSS特效不仅可以改变表格的样式，如边框、背景色、字体等，还可以实现动态效果，如淡入淡出、滑动等。例如，当用户添加或删除行时，新行可以优雅地淡入，被删除的行则逐渐消失。 接下来，我们关注如何使用这个插件...
11.4 块的背景色问题 11.5 排版实例：电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一：蓝色经典 12.3 实例二：清明上河...
例如，可以定义表格的边框、背景色、文字颜色、行高亮等样式。在本例中，当鼠标悬停在表格的某一行时，对应的行会被高亮显示，这通常是通过CSS的`:hover`伪类实现的。同时，可能还会有定制的滚动条样式，使得滚动...
接着定义了页面的`<style>`部分，为表格设置了整体样式以及奇数行(`.tr_odd`)和偶数行(`.tr_even`)的背景色。 在`<body>`部分，创建了一个表格，表格的第一行是表头，其余行是数据行。通过CSS类`.tab_body`对表格...
找到匹配项后，可以动态修改元素的样式，如改变字体颜色或添加背景色。 再者，jQuery UI是jQuery的一个扩展库，提供了一系列用户界面组件，包括对话框、滑块、日期选择器等。在这个项目中，特别提到了gridster插件...
`则可以更改背景色。更高级的CSS技巧如Flexbox或Grid布局可以实现更复杂的表格设计。 在这个"超强jquery表格样式.zip"文件中，很可能包含了一些预设的CSS类和jQuery插件，帮助开发者快速应用各种表格样式。这些样式...
这段代码在页面加载完成后会运行，它选择了`#myTable`表格中的所有偶数行（`:even`伪类）并设置其背景颜色为浅灰色，接着选择所有奇数行（`:odd`伪类）并设置为白色。这将使得表格的行交替显示两种颜色，从而提升...
CSS文件则用于定义表格及元素的样式，比如单元格的背景色、字体、边框、鼠标悬停效果等。`.expand`或`.collapse`这样的类名可以被用来区分单元格的展开和收缩状态，并在JavaScript中动态添加或移除这些类来控制样式...
与此同时，`css`目录包含的CSS样式文件（如`style.css`或`fixedtable.css`）为表格提供了一致的视觉样式，可能定义了单元格的边距、填充、背景色、字体等。同时，为了实现固定效果，可能添加了一些特殊的CSS类，例如...
在CSS部分，定义了表格的样式，包括边框、字体、背景色等。`parent`类用于标记可点击的父级行，`odd`类用于区分奇偶行的背景色，而`selected`类用于标识当前被选中的行，改变其背景色以突出显示。 关键的JavaScript...
本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色效果的表格。 首先，`jQuery`是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画等功能。`Table UI`则是一类专门用于...
为了创建斑马效果，我们通常会在CSS中使用偶数行选择器，如`tr:nth-child(even)`，来交替设置背景色，这样可以提高可读性。 接下来，我们需要引入jQuery库，这可以通过在HTML文档的`<head>`部分添加`<script>`标签...
例如，使用`border-collapse`属性可以控制单元格边框是否合并，`background-color`设置背景色，`text-align`调整文本对齐。CSS3还提供了更丰富的选择器和动画效果，如`:hover`用于鼠标悬停状态，`transition`或`...
这可能包括单元格的边框样式、背景色、字体样式等，以提升用户体验。通过CSS，我们可以定制表格的视觉效果，使其更接近Excel的外观。 "fonts"目录可能包含了一些特殊字体文件，用于实现特定的字符样式，如图标或...
这段CSS代码为表格设置了内联边框、单元格填充和交替行背景色。 文件`table1.html`、`table2.html`和`table3.html`可能是包含不同表格示例的HTML页面，而`js`文件可能包含了上述的jQuery代码。通过分析这些文件，你...
在实际应用中，这些源码可能还包括对表格样式的处理，例如字体、颜色、背景色、边框等，确保在导出后的文件中保持与网页上一致的视觉效果。此外，为了提高用户体验，源码可能还会包含一些交互设计，如弹出对话框提示...