jquery 表格行变色

最新推荐文章于 2021-07-24 11:37:00 发布
最新推荐文章于 2021-07-24 11:37:00 发布
阅读量153 收藏
点赞数
分类专栏： JQuery 文章标签： jquery 表格行变色 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sheng_xu0507/article/details/84148574
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
table {
border: red solid 1px;
border-right: none;
border-bottom: none;
}

table td {
border-right: red solid 1px;
border-bottom: red solid 1px;
text-align: center;
}

table th {
border-right: red solid 1px;
border-bottom: red solid 1px;
}

/* 鼠标经过的背景色 */
.tr_bg { background-color: blue; }
/* 选中背景色 */
.tr_click_bg { background-color: gray; }
</style>
<script src="../plugs/jquery-1.7.1.js"></script>
<script>
$(function() {
$("#tab").find("tr").hover(function() {
$(this).addClass("tr_bg"); // 添加背景色
}, function() {
$(this).removeClass("tr_bg"); // 去除背景色
});

$("#tab").find("tr").click(function() {
$("#tab").find("tr").removeClass("tr_click_bg"); // 清除所有背景色
$(this).addClass("tr_click_bg"); // 给选中添加背景色

})
})
</script>
</HEAD>

<BODY>
<table width="500" cellspacing="0" cellpadding="0" id="tab">
<tr>
<th>tou</th>
<th>tou</th>
<th>tou</th>
<th>tou</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</BODY>
</HTML>

sheng_xu0507
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery鼠标移动表格变色及修改单元格值
03-21
NULL 博文链接：https://zjriso.iteye.com/blog/897555
jQuery 表格选中颜色变化
weixin_43297321的博客
02-16 470
功能简介：选中偶数行，tr颜色变化；td颜色暂时固定下来。tr红色，td淡蓝色。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> ...
jquery表格变色
07-08
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
用jquery使表格变色
hongshengaccp的博客
11-04 168
jQuery简单实现表格隔行换色+鼠标经过时样式 &lt; !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&...
jQuery--表格隔行变色
LHH201016的博客
07-24 550
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
jQuery table选中表格行变色
10-25
本主题聚焦于“jQuery table选中表格行变色”这一功能，它在交互式网页设计中尤为常见，可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先，我们需要一个基本的HTML表格结构，例如： ```html ...
jQuery Table选中表格行变色代码
06-24
以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中，你可能需要根据具体需求进行调整，比如添加多选功能、实现分页表格等。如果你的项目中包含`jiaoben5173`文件，这可能是一个包含示例代码...
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
10-30
jQuery的表格悬停变色 恢复,表格点击变色/恢复,点击行选Checkbox
jQuery 表格隔行变色代码[修正注释版]
10-30
代码比较精简，大家可以了解下jquery的对象控制方法
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
10-27
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
jQuery实现表格隔行变色
叶为正的博客
11-06 4589
隔行变色 在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。 这里要注意几个
jquery实现表格颜色变化
zhang245754954的博客
01-31 4416
在学习jquery的过程中学习到了如何利用jquery来渲染表格的颜色，这个地方由于是初次接触所以也都是一些初级的案例首先需要介绍两个当页面加载完毕之后才会执行的函数<script type="text/javascript"> //页面加载完毕之后执行函数体内的函数和window.onload=function(){};等价 $().ready(function(){ }); <br/>
jQuery实现选择某一行改变其颜色，取消选择恢复原色
qq_40930491的博客
05-26 5663
要求：使一个 table 隔行变色，选中其中一列的复选框时，该复选框所在行的背景色高亮显示， 取消选中复选框时，所在行的背景色恢复遇到的最大的问题：就是在以上代码中使用了css对表格的背景颜色进行初始化设置，这样无法实现选择checkbox整行改变颜色，效果如下最终实现代码：就是通过表格中的bgcolor属性对表格背景颜色初始化最终实现效果：...
前端简单入门第十八讲 使用jQuery实现表格的隔行换色
李阿昀的博客
05-10 7802
还记得之前我使用JavaScript来实现表格的隔行换色效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色！现在我就来使用jQuery完成对数据表格进行隔行换色的显示效果，显示效果为： 要实现该效果，必然要了解以下两个知识点： jQuery的基本过滤选择器： :odd：匹配所有索引值为奇数的元素，从0开始计
jQuery实现表格选中行变色
java_zhaoyanli的专栏
12-02 3463
jQuery实现表格选中行变色 .s1 { background-color: yellow; } $(function() { $("tbody tr").click(function() { $(this).addClass("s1").siblings().removeClass("s1"); $(this).find(":radio").attr("check
JQuery实现表格奇偶数行变色
Jyannic的博客
09-11 4174
HTML代码部分start 表格奇偶数行变色     姓名 工资 入职时间 操作 Tom $3500 2010-12-25 删除 Mary $3400 2010-12-01 删除 King $5900 2009-8-17 删除 Scott $3800 2012-11-17 删除
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jquery根据条件变换表格颜色
Hxuening的博客
10-10 573
$(document).ready(function(){ //库存低于库存预警变色 $("#listTable").find("tr").each(function () { var v1 = parseFloat($(this).children('td:eq(5)').text()); //取行第5列值 var v2 = parseFloat($(t..
JQuery划过表格变色
Gybk123的博客
11-07 360
Data                 Data                 Data                 Data                                           Data                 Data                 Data                 Data             
jquery表格隔行变色和当前行变色
最新发布
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值