`
gaoke
  • 浏览: 86776 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js css html表格选中变色

    博客分类:
  • JS
 
阅读更多
<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">&nbsp;</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>
分享到:
评论

相关推荐

    js表格变色制作表格隔行变色,滑过选中变色特效

    为了提高用户的阅读体验,有时候我们需要对表格进行美化,例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先,让我们了解一下JavaScript在网页中的作用。...

    css 单击表格变换颜色

    若要实现类似选中状态的效果,可以使用JavaScript或者CSS的`:focus-within`伪类来实现。 使用JavaScript,你可以监听`mousedown`和`mouseup`事件,分别设置和移除单元格的特定类,通过这个类来控制颜色变化: ```...

    jQuery仿Excel表格选中单元格变色特效.zip

    总的来说,jQuery仿Excel表格选中单元格变色特效的实现涉及了HTML布局、jQuery事件监听和DOM操作以及CSS样式设计。通过合理的代码组织和设计,我们可以构建出与Excel类似的交互体验,提升用户的操作便捷性。这个项目...

    jQuery仿excel表格选中变色效果代码

    本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果,以增强用户界面的交互性。 首先,我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器,它允许我们高效地选取DOM元素。例如,`$("#...

    jQuery仿excel表格选中变色效果代码.zip

    这个"jQuery仿excel表格选中变色效果代码"是一个示例项目,旨在模仿Microsoft Excel中的单元格选中时改变颜色的特性,为网页中的表格提供类似的操作体验。这种效果可以提升用户界面的互动性和用户体验。 在...

    js实现表格变色(鼠标移动 选中变色)

    // 选中变色 } else { this.parentNode.parentNode.style.backgroundColor = ''; // 取消选中恢复原色 } }); } }); ``` 在这段代码中,我们首先获取到表格元素和其中的所有行。然后,为每一行添加`mouseover`...

    jQuery Table选中表格行变色代码.zip

    本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能,即当用户点击表格中的某一行时,该行会变色,以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见,例如在数据分析、电商...

    jQuery Table点击选中表格行变色代码.zip

    总的来说,这个"jQuery Table点击选中表格行变色代码"是一个基础的用户交互示例,展示了如何结合jQuery的事件处理和CSS样式来增强用户体验。在实际项目中,开发者需要根据具体需求进行扩展和优化,例如增加数据驱动...

    jQuery table选中表格行变色

    本主题聚焦于“jQuery table选中表格行变色”这一功能,它在交互式网页设计中尤为常见,可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先,我们需要一个基本的HTML表格结构,例如: ```html ...

    layui的表格table选中数据后更改本行的颜色

    总的来说,实现layui表格选中行变色的功能,主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中,前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术,能帮助你更好地利用...

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

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

    jQuery Table点击选中表格行变色代码

    在这个项目中,可能有两个CSS类,一个用于未选中的表格行(如`.normal-row`),另一个用于选中的表格行(如`.selected-row`)。CSS样式可以设置背景颜色、边框等属性,使得选中状态的行有明显的视觉差异。 例如,...

    JS+CSS的table表格特效

    "JS+CSS的table表格特效"是一个利用JavaScript(JS)和层叠样式表(CSS)来增强HTML表格功能的例子,旨在提高用户体验并增加交互性。在这个项目中,我们可以看到几个关键的技术点: 1. **复选框全选**:这是表格中...

    jQuery仿Excel表格选中单元格变色特效

    以上就是使用jQuery实现仿Excel表格选中单元格变色特效的基本步骤。通过结合HTML、CSS和JavaScript,我们可以创建一个高度交互的表格组件,提供类似于Excel的用户体验。在实际应用中,还可以根据需要添加更多的功能...

    javascript+css仿excel表格效果

    最后,压缩包中的“表格变色”可能是指一个示例,演示了如何通过JavaScript和CSS实现单元格颜色随数据变化的功能。这通常涉及到数据驱动的CSS类切换,例如,当单元格值达到特定条件时,JavaScript会添加一个预定义的...

    表格隔行换色 鼠标移过变色

    文件内容可能包括HTML结构(包含表格和复选框)、CSS样式定义以及JavaScript代码,用于控制表格的显示效果和多选功能。通过打开和查看这个文件,你可以直观地学习到如何在实际项目中应用这些技术。 总的来说,"表格...

    表格特效、js、css、图片

    1. **表格特效**:表格特效主要是通过CSS和JavaScript来实现的,如标题所述,包括表格复选按钮的选中变色特效、表格排序、鼠标经过表格变色以及鼠标经过显示产品图片等。这些特效不仅能让表格看起来更专业,还能增强...

    jQuery Table选中表格行变色代码

    以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中,你可能需要根据具体需求进行调整,比如添加多选功能、实现分页表格等。如果你的项目中包含`jiaoben5173`文件,这可能是一个包含示例代码...

Global site tag (gtag.js) - Google Analytics