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

js隔行,滑动,点击 变色

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

$(document).ready(function(){
//demo1:
   //-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
  function() {$(this).addClass('highlight');},
  function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
  function() {$(this).toggleClass('selected');}
);

//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
  function() {$(this).addClass('highlight');},
  function() {$(this).removeClass('highlight');}
);

     // 如果复选框默认情况下是选择的,变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
  function() {
   if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).find('input[type="checkbox"]').removeAttr('checked');
   } else {
    $(this).addClass('selected');
    $(this).find('input[type="checkbox"]').attr('checked','checked');
   }
  }
);

//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
  function() {$(this).addClass('highlight');},
  function() {$(this).removeClass('highlight');}
);

// 如果单选框默认情况下是选择的,变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');

// 单选框
$('.cssraindemo3 tbody tr').click(
  function() {
   $(this).siblings().removeClass('selected');
   $(this).addClass('selected');
   $(this).find('input[type="radio"]').attr('checked','checked');
  }
);


});




//-->
</SCRIPT>


<style type="text/css">
h1   { font:bold 20px/26px Arial;}
table  { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th   { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd  { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected  { background:#aaaaaa;color:#fff;}
</style>




<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
  <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>                           
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>


<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+  多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
    <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>



<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+  单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
   <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
   <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
    <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
  <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
   <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>

分享到:
评论

相关推荐

    jquery操作表格隔行,滑动,点击,变色

    在“jquery操作表格隔行,滑动,点击,变色”这个主题中,我们将深入探讨如何使用jQuery来增强HTML表格的功能,包括隔行变色、滑动效果、点击响应以及多选框选中行的变色。 1. **隔行变色**:在HTML表格中,为了提高...

    jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】

    在本教程中,我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先,我们要明白jQuery中的`$(document).ready()`函数,它表示当...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    除此之外,本文还介绍了滑动变色的效果,即当鼠标移动到某一行上时,该行的背景颜色会改变;当鼠标离开时,颜色又恢复到原始状态。这同样是通过为表格行添加mouseover和mouseout事件来实现的,利用jQuery的addClass...

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    废话不多说了,直接给大家贴代码了,具体代码如下所示: &lt;&#37;@ page language=java import=java.util.* pageEncoding=UTF-8%&gt; &lt;html&gt; &lt;head&gt; &lt;!-- 引入的css压缩文件 --&gt;...tabl

    jquery 表格排序 隔行换色,高亮操作例子集

    内容索引:脚本资源,jQuery,jquery排序,表格排序,... Demo1--隔行,滑动,点击 变色.  Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.  Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.  Demo4--表格排序.  

    表格的应用

    本篇文章将深入探讨“表格的应用”,重点关注隔行变色、滑动变色、点击变色以及多选框功能在表格中的实现和作用。 1. **隔行变色** 隔行变色是一种常见的视觉设计技巧,用于提高用户在浏览表格时的可读性和区分度...

    jquery收集效果集合一些选项卡/菜单等很实用的特效

    JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...

    autoJS1688示例.zip

    list隔行变色.js long.js long2.js ls_socket.js lunar.js LZ动作.js main(1)(1).js main(1)(2).js main(1)(3).js main(1)(4).js main(1).js main(10).js Main(11).js main(12).js main(13).js main...

    jquery实例文档,教程

    7. **表格样式处理**:利用`mouseover()`, `addClass()`, `mouseout()`, `removeClass()`, `click()`, 和 `toggleClass()`等方法实现表格行的隔行变色、鼠标滑过和点击时的样式变化。`tr:even`选择器用于选取偶数行...

    课工场作业-jq.zip

    在本课程作业“课工场作业-jq.zip”中,主要涵盖了五个JavaScript和jQuery相关的实践练习,旨在提升学员对网页动态效果和用户交互设计的能力。这些练习分别涉及到基础的HTML结构构建、CSS样式设计以及jQuery库的应用...

    jquery 笔记(自己学习jquery整理好的)

    #### 一、隔行变色的表格实现 在Web开发中,为了提高用户体验,经常需要对表格进行美化处理,比如让表格的每一行隔行变色。这种方式不仅美观,还能帮助用户更容易地阅读和理解数据。 **原始JavaScript实现:** ``...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5....

    jQuery权威指南-源代码

    5.2 滑动/131 5.2.1 slideDown()与slideUp方法/131 5.2.2 slideToggle()方法/134 5.3 淡入淡出/135 5.3.1 fadeIn()与fadeOut()方法/135 5.3.2 fadeTo()方法/137 5.4 自定义动画/139 5.4.1 简单的动画/140 ...

Global site tag (gtag.js) - Google Analytics