`

jquery 怎么样实现,点击一个表格(table)的 tr 时改变其背景颜色

阅读更多
jquery实现点击一个表格(table)的 tr 时改变其背景颜色,点击下一个tr时,上一个tr背景变回原来的背景,当前点击的这个tr背景改变。
<script type="text/javascript">
     var pre;//原来的节点,假设原来的背景颜色为白色,点击变为#e6f0fc
        function selectArow(sObject) {
            $(sObject).attr("style", "BACKGROUND-COLOR: #e6f0fc");
            if (pre != null && pre != sObject) $(pre).attr("style", "BACKGROUND-COLOR: white");
                                pre = sObject;
        }
</script>
<table id="tb">
<tr onclick="selectArow(this);"> </tr>
<tr onclick="selectArow(this);"> </tr>
<tr onclick="selectArow(this);"> </tr>
</table>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery+ajax实现动态添加表格tr td功能示例

    主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下

    css+jquery完美实现table表头固定显示(浮动)

    利用css和jquery实现table表头固定(浮动)显示,不复制表格内容,不更改页面元素,完全通过js设置样式来实现。

    jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能。分享给大家供大家参考,具体如下: HTML页面元素如下: &lt;!-- 订单明细dialog --&gt; 销售订单明细 xss=removed&gt; &lt;table class=exhibit_table id=...

    JQuery操作表格(附源码)实现tr上下移动。

    基于JQuery的操作表格附源码,实现html中table的tr的添加、删除以及上下移动。

    table鼠标经过时整行变色 jquery

    table鼠标经过时整行变色 jquerytable鼠标经过时整行变色 jquery

    jQuery实现table表格checkbox全选的方法分析

    本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题...

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。 前台代码: &lt;!DOCTYPE ...

    jQuery实现获取table表格第一列值的方法

    本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    jQuery实现表格展开与折叠的方法

    这是很人性化的一款特效代码,实现点击其中一个父级,另一个之前打开的父级会自动关闭 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jQuery表格展开折叠,默认折叠&...

    JQuery 动态生成Table表格实例代码

    JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt;...

    jQuery表格列自由拖动排序.zip

    &lt;h1 class="datouwang"&gt;jQuery表格列自由拖动排序 &lt;table id="tableSort"&gt; &lt;tr&gt; 点击排序"&gt; 序列 点击排序"&gt; 名称 点击排序"&gt; 数量 点击排序"&gt; 单价(Q点) 点击排序"&gt; 总计(Q点) &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1...

    jQuery实现html table行Tr的复制、删除、计算功能

    主要介绍了jQuery实现html table行Tr的复制、删除、计算功能,涉及jQuery针对table表格的常见复制、添加、删除与计算行数等简单操作技巧,需要的朋友可以参考下

    jQuery实现表格奇偶行显示不同背景色 就这么简单

    做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便。通常我们是怎么实现的呢?就是在每个tr标签上加css样式。 代码如下所示: &lt;html&gt; &lt;style type=text/...

    运用jquery技术实现表格元素的上下移动

    运用jquery技术来实现table元素的tr内容的上下移动,从而改变用户调整的顺序.研究的源代码实例共享给大家,希望能够帮助到你.

    jQuery自适应PC手机端可编辑表格代码.zip

    &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。

    jQuery实现动态添加tr到table的方法

    主要介绍了jQuery实现动态添加tr到table的方法,涉及jQuery针对table表格元素的动态操作相关技巧,需要的朋友可以参考下

    JQuery实现table行折叠效果以JSON做数据源

    代码如下: &lt;!DOCTYPE html&gt; &lt;html xmlns=”http://www.w3.org/1999/xhtml”&gt; &lt;head runat=”server”&gt; &lt;meta http-equiv=”Content-Type” content=... charset=utf-8″ /&gt; &lt;...script type=”tex

    bootstrap-table+treegrid实现树形表格

    实现一个树形表格的时候有多种方法:比如把 ztree 的树形直接拼接成表格,或者用强大的 jqgrid 实现,今天介绍一个比较轻量级的实现:使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...

Global site tag (gtag.js) - Google Analytics