<!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>
<style type="text/css">
<!--
#ejiaA1 {
width: 550px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#ejiaA1 td,#ejiaA1 th {
padding: 5px;
border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 1px solid;
font-size: 12px;
height: 16px;
line-height: 16px;
}
#ejiaA1 tr td span {
color: #686868
}
#ejiaA1 tr td span.st1 {
color: #ff0000
}
-->
</style>
<script language="javascript">
<!--
//ejiaA1("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
function ejiaA1(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")
this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
-->
</script>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="ejiaA1">
<tr>
<th>接入方式</th>
<th>上网时间</th>
<th>下网时间</th>
<th>上网时长</th>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
<tr>
<td>宽带接入</td>
<td>2008-4-23 12:40:18</td>
<td>2008-4-23 14:50:28</td>
<td>2小时10分10秒</td>
</tr>
</table>
<script language="javascript">
<!--
ejiaA1("ejiaA1","#fff","#F5F5F5","#FFFFCC","#FFFF84");
-->
</script>
</body>
</html>
分享到：
相关推荐
本示例中的"jQuery Table点击选中表格行变色代码"是关于如何利用jQuery来实现一个交互式表格的功能，当用户点击表格的某一行时，该行会高亮显示，提供更好的用户体验。 首先，`index.html`文件是网页的主结构文件，...
在表格变色的场景中，我们将利用JavaScript事件监听和DOM操作来实现所需的功能。 1. **隔行变色**：这个功能可以使得表格看起来更加清晰，帮助用户更容易区分不同的行。我们可以使用JavaScript遍历表格的所有行，...
总结一下，实现微信小程序默认第一个选中变色效果的关键在于： 1. 使用三目运算符在`wxml`中动态设置类名。 2. 在`wxss`中定义选中和非选中状态的样式。 3. 初始化`data`对象，包含选中项的索引。 4. 编写`goIndex`...
隔行变色是一种常见的视觉增强技巧，它可以帮助用户更容易地区分表格中的行。在GridControl中，我们可以使用DefaultCellStyle属性来实现这一效果。在GridView的RowCellStyle事件中，根据行索引的奇偶性设置单元格的...
在Vue组件中，我们可以通过监听这些事件来实现与用户的交互，例如高亮选中的柱子、显示详细数据信息等。 8. **响应式设计**： 为了确保图表在不同设备和屏幕尺寸上都能正常显示，我们需要考虑响应式设计。Vue的`...
10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...
10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...
实例195 选中的行变色 302 7.2 对单元格的焦点进行控制 303 实例196 选定表格中的单元格 303 实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 ...
6. **选座效果**：这里的选座效果可能涉及到JavaScript/jQuery的动画和交互设计，比如鼠标悬停时座位变色、选中后的高亮效果、座位被选中后的锁定状态等，这些都是提升用户体验的关键元素。 7. **前端开发流程**：...
3. **隔行变色**：在表格中，隔行变色可以提高数据的可读性。jQuery可以通过遍历行并应用不同的CSS类实现这一功能。例如，使用`$('tr:even').addClass('evenColor')`和`$('tr:odd').addClass('oddColor')`分别对偶数...
- **marker**：标记，用于定义图表中数据点的标记样式。 - **states**：数据点的状态，包括`hover`鼠标滑过点的样式和`select`选中点的样式。 - **subtitle**：副标题，用于设置图表的副标题。 - **title**：标题，...
而对于Repeater控件，如果需要实现类似的选中变色效果，则需要借助JavaScript或者CSS来实现。 在性能方面，对于处理大量数据集来说，Repeater控件通常表现更好一些。由于Repeater控件不包含DataList那样的预设布局...
8. **表格美化**：为了提高图表的视觉效果，可以进行以下美化： - 添加标题和数据来源，这有助于读者理解图表内容。 - 字体选择很重要，对于中文字体，可以选择微软雅黑或黑体；英文字体推荐Arial；数字字体可以...
- 使用CSS制作网页背景图、鼠标经过及选中导航变色效果等。 - 在首页制作搜索表单。 **布局方面**： - 网页布局整体为LOGO、导航、主体内容布局。 - 子页面多种布局，图片居中布局，文本描述对齐方式设置为左对齐。...
6. **表格控件特性**：表格控件的数据源可以是表、视图或查询，它可以显示一对多关系中的子表，并且是一个容器对象，但其列控件可以包含其他控件，所以选项B是错误的。 7. **Access报表格式**：Access允许用户创建...
- **格式标记**：Word格式栏上的B、I、U分别代表粗体、斜体和下划线，而不是题目中所述的斜体、下划线标记、粗体。 ### 22. Word的编辑菜单 - **概念解析**：Word的编辑菜单提供了多种编辑文档的功能。 - **粘贴...