jQuery轻松实现表格的隔行变色，点击行变色

最新推荐文章于 2021-06-29 22:52:35 发布
最新推荐文章于 2021-06-29 22:52:35 发布
阅读量8.3k 收藏 4
点赞数
文章标签： jquery function xhtml javascript border html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwt90/article/details/7400579
版权

jQuery轻松实现表格的隔行变色，点击行变色：

<!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=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 
 //点击变色 
 $("tr").toggle(
  function(){
   
   $(this).addClass("selected");
   
  },function (){

   $(this).removeClass("selected");

  }
  );

 //滑动变色
 $("tr").mouseover(function (){
  
  $(this).addClass("se"); 
  
 }).mouseout(function (){
  
  $(this).removeClass("se");
  
 });
 

 
 
 
});
</script>
</head>

<body>
<table width="500" border="1" align="center">
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html>

 

zwt90
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery隔行换色
ahao4311的博客
02-20 282
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jQuery--表格隔行变色
LHH201016的博客
07-24 555
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
用jQuery实现表格的隔行变色
bing7599069的专栏
03-21 680
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 内容选择器可见性  //使用jquery加载事件      $(document).ready(function (){  //$("table:eq(0) tr:even").css("ba
表格隔行换色php,jquery实现表格隔行换色效果
weixin_35935279的博客
03-17 142
本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下：运行效果截图如下：具体代码如下：1、新建一个web项目，jQuery；2、在WebContent目录下新建script文件夹，将jquery-1.10.1.js复制到script中；3、同样，新建TableColor.html；TableColor.html：表格间隔色body{width:100%;height...
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
在本文中，我们将探讨如何使用jQuery技术实现网页上表格的隔行变色效果，以及如何高亮显示当前用户选择的行。这个过程涉及到了jQuery对于表格元素的遍历、样式调整和事件处理等操作技巧。 首先，我们需要了解表格的...
jquery实现表格中点击相应行变色功能
zhang_yang_43的专栏
05-08 3926
对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于： DOCTYPE html> html lang="en" xmlns="http://www.w3.org/1999/xhtml"> head> meta charset="utf-8" /> title>title> link href="c
Jquery实现点击表格行变色！
weixin_30446613的博客
08-15 202
　　时隔一年左右，学习了新的知识，从尝试Linux部署项目，网络安全，至后端开发，然后用起了Jquery， 而且是必须要做。也让自己见识可能会更广泛一些。对于一个刚毕业的大学生而言。方正我是没有用过jquery， 尽管我有培训学习过，也只是两天时间，略有了解而已，工作中画画页面肯定后期通过专业人士调，可怕， 感觉我即将这是我迈向前端的开始，不过还是很开心，调页面的时候，一定要稳，而且需要时间...
jQuery动态生成隔行变色的table
04-27
jQuery动态生成隔行变色的table，使用jQuery+css+json实现
一天搞定jQuery(二)——使用jQuery表格的隔行换色
05-10
一天搞定jQuery(二)——使用jQuery表格的隔行换色
用jquery实现表格的隔行变色
youngerhao的专栏
03-20 832
简单选择器学习 //使用jquery加载事件 $(document).ready(function (){ $("tr:even").css("background","#ffff99"); $("tr:odd").css("background","#cccccc"); });       姓名     性别
jquery 实现表格隔行变色
键盘人生
03-06 501
var $tr =$("table:eq(1) tr"); //序列为1的表格 var colr=null; //隔行颜色变化 奇数行红色// $("table:eq(1) tr:even").css("background","red"); //鼠标移过时变绿色 $("table:eq(1) tr").mouseover(function(){ colr=$(this).c
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
前端简单入门第十八讲 使用jQuery实现表格的隔行换色
李阿昀的博客
05-10 7807
还记得之前我使用JavaScript来实现表格的隔行换色效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色！现在我就来使用jQuery完成对数据表格进行隔行换色的显示效果，显示效果为： 要实现该效果，必然要了解以下两个知识点： jQuery的基本过滤选择器： :odd：匹配所有索引值为奇数的元素，从0开始计
使用原生js和jQuery实现表格的隔行变色
JUN_WEB_YANG的博客
10-26 1355
原生js实现表格隔行变色：利用原生js操作DOM元素 HTML：<!DOCTYPE HTML> <html> <head> <title>1. 使用节点树方式实现表格偶数行变色</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/3.css" /> <!--引入jQuery文件--> <script src="./js
Jquery表格点击行变色
weixin_45824497的博客
06-24 251
_(_.reverse(_newData)).map(_row => { rowInTable = theTable.insertRow(1); rowInTable.onclick = function(e){ $("tbody tr").removeClass("anti_bg_color"); $(this)[0].className += 'anti_bg_color'; } } reverse():用于颠倒数组中元素顺序。 （该表格为倒插顺序，[0] 是表头 [1]是
jQuery实现表格隔行变色案例
qq_42918876的博客
06-29 1671
jQuery实现表格隔行变色案例html结构js代码部分效果如图 其实挺简单的，思路就是，创建一个table，然后给偶数行和奇数行赋不同背景颜色。 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
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、付费专栏及课程。

余额充值