<style type="text/css">
.css_Grid1
{
padding:3px;
border:1px;
border-width:1px;
border-color:#ffee00;
width:100%;
border-collapse:collapse;
}
.css_Grid
{
color:Black;
background-color:#ffffee;
border-color:#5D7B9D;
border-width:1px;
border-style:solid;
width:450px;
}
.css_GridTR
{
color:White;
background-color:#5D7B9D;
}
td
{
font-size: 9pt;
padding:3px;
}
.css_TR_c1
{
background-color:#ffffee ;
color:#000000;
}
.css_TR_c2
{
background-color:#ffffaa ;
color:#993300;
}
.css_TR_move
{
background-color:#eaa ;
color:#123456;
}
.css_TR_CK
{
background-color:#ee0 ;
color:#333333;
}
</style>
<p><span id="MG"> </p>
<table class="css_Grid">
<tr class="css_GridTR">
<td>新闻标题</td>
<td>添加时间</td>
<td>人气</td>
</tr>
<tr class="css_TR_c1" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'1')" onmouseout="Out(this)">
<td>iPhone 3G拆解图</td>
<td>08-07-27</td>
<td>00,002</td>
</tr>
<tr class="css_TR_c2" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'2')" onmouseout="Out(this)">
<td>奥运核心资源被分食 搜狐央视网谁忽悠谁?</td>
<td>08-07-27</td>
<td>1,234,567</td>
</tr>
<tr class="css_TR_c1" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'3')" onmouseout="Out(this)">
<td>微软推增强浏览器插件IE7Pro 助IE一臂之力</td>
<td>08-07-27</td>
<td>00,123</td>
</tr>
<tr class="css_TR_c2" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'4')" onmouseout="Out(this)">
<td>智联招聘70%股权换1.1亿美元巨额融资</td>
<td>08-07-27</td>
<td>08,888</td>
</tr>
<tr class="css_TR_c1" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'5')" onmouseout="Out(this)">
<td>前Google员工推搜索引擎Cuill 3倍Google网页数</td>
<td>08-07-27</td>
<td>00,654</td>
</tr>
<tr class="css_TR_c2" onmousemove="Move(this)" ondblclick="DbCK(me)" onclick="Ck(this,'6')" onmouseout="Out(this)">
<td>WCG中国区落幕 一代新人换旧人</td>
<td>08-07-27</td>
<td>00,003</td>
</tr>
</table>
<p></span>
<script type="text/jscript" language="javascript">
var clickClass = "";
var moveClass = "";
var clickTR ;
var moveTR ;
function Move(me)
{
if (clickTR != me)
{
if (moveTR != me)
{
moveClass = me.className;
moveTR = me;
me.className = "css_TR_move";
//alert("a");
}
}
}
function Out(me)
{
if (clickTR != me)
{
moveTR = null;
me.className = moveClass;
}
}
function Ck(me,dataID)
{
if (clickTR != me)
{
if (clickTR)
{
clickTR.className = clickClass;
}
clickTR = me;
clickClass = moveClass;
}
me.className = "css_TR_CK";
}
</script>
分享到:
相关推荐
为了提高用户的阅读体验,有时候我们需要对表格进行美化,例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先,让我们了解一下JavaScript在网页中的作用。...
若要实现类似选中状态的效果,可以使用JavaScript或者CSS的`:focus-within`伪类来实现。 使用JavaScript,你可以监听`mousedown`和`mouseup`事件,分别设置和移除单元格的特定类,通过这个类来控制颜色变化: ```...
总的来说,jQuery仿Excel表格选中单元格变色特效的实现涉及了HTML布局、jQuery事件监听和DOM操作以及CSS样式设计。通过合理的代码组织和设计,我们可以构建出与Excel类似的交互体验,提升用户的操作便捷性。这个项目...
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果,以增强用户界面的交互性。 首先,我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器,它允许我们高效地选取DOM元素。例如,`$("#...
这个"jQuery仿excel表格选中变色效果代码"是一个示例项目,旨在模仿Microsoft Excel中的单元格选中时改变颜色的特性,为网页中的表格提供类似的操作体验。这种效果可以提升用户界面的互动性和用户体验。 在...
// 选中变色 } else { this.parentNode.parentNode.style.backgroundColor = ''; // 取消选中恢复原色 } }); } }); ``` 在这段代码中,我们首先获取到表格元素和其中的所有行。然后,为每一行添加`mouseover`...
本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能,即当用户点击表格中的某一行时,该行会变色,以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见,例如在数据分析、电商...
总的来说,这个"jQuery Table点击选中表格行变色代码"是一个基础的用户交互示例,展示了如何结合jQuery的事件处理和CSS样式来增强用户体验。在实际项目中,开发者需要根据具体需求进行扩展和优化,例如增加数据驱动...
本主题聚焦于“jQuery table选中表格行变色”这一功能,它在交互式网页设计中尤为常见,可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先,我们需要一个基本的HTML表格结构,例如: ```html ...
总的来说,实现layui表格选中行变色的功能,主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中,前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术,能帮助你更好地利用...
在提供的文件"表格隔行变色.htm"中,很可能包含了以上代码示例的实际实现,你可以打开文件查看具体的HTML、CSS和JavaScript代码。理解这些基础知识对于任何Web开发者来说都是至关重要的,特别是在处理大量数据展示时...
在这个项目中,可能有两个CSS类,一个用于未选中的表格行(如`.normal-row`),另一个用于选中的表格行(如`.selected-row`)。CSS样式可以设置背景颜色、边框等属性,使得选中状态的行有明显的视觉差异。 例如,...
"JS+CSS的table表格特效"是一个利用JavaScript(JS)和层叠样式表(CSS)来增强HTML表格功能的例子,旨在提高用户体验并增加交互性。在这个项目中,我们可以看到几个关键的技术点: 1. **复选框全选**:这是表格中...
以上就是使用jQuery实现仿Excel表格选中单元格变色特效的基本步骤。通过结合HTML、CSS和JavaScript,我们可以创建一个高度交互的表格组件,提供类似于Excel的用户体验。在实际应用中,还可以根据需要添加更多的功能...
最后,压缩包中的“表格变色”可能是指一个示例,演示了如何通过JavaScript和CSS实现单元格颜色随数据变化的功能。这通常涉及到数据驱动的CSS类切换,例如,当单元格值达到特定条件时,JavaScript会添加一个预定义的...
文件内容可能包括HTML结构(包含表格和复选框)、CSS样式定义以及JavaScript代码,用于控制表格的显示效果和多选功能。通过打开和查看这个文件,你可以直观地学习到如何在实际项目中应用这些技术。 总的来说,"表格...
1. **表格特效**:表格特效主要是通过CSS和JavaScript来实现的,如标题所述,包括表格复选按钮的选中变色特效、表格排序、鼠标经过表格变色以及鼠标经过显示产品图片等。这些特效不仅能让表格看起来更专业,还能增强...
以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中,你可能需要根据具体需求进行调整,比如添加多选功能、实现分页表格等。如果你的项目中包含`jiaoben5173`文件,这可能是一个包含示例代码...