实现多功能的表格的各行选择变色(点击、单选、多选)

原创 2012年03月26日 22:07:43

<!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>实现多动能的表格的各行选择变色</title>
</head>
<style>
tr.odd{
 background-color:#F99;}
tr.even{
 background-color:#FF9;}
 tr.hover{
 background-color:#03C;}
tr.selected{
 background-color:#39C;} 

</style>
<script Xlanguage="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script Xlanguage="javascript" type="text/javascript">
 $(document).ready(function (){
//隔行、滑动、点击、变色
  $("#tb1 tr").each(function (index,domEle){
 
  $("tr:even").addClass("odd");
  $("tr:odd").addClass("even");
     
  $(this).click(function(){
   
   $(this).toggleClass("selected");
  });
 
 }).hover(function (){
   
   $(this).addClass("hover"); 
    },function (){
    
   $(this).removeClass("hover"); 
   });
 
 
 
  
//多选框实现表格的隔行变色
  $(" #tb2 tr").each(function (index,domEle){
     $("input[name=box]").each(function (index,domEle){
  var $tr;
  $("tr:even").addClass("odd");
  $("tr:odd").addClass("even");
     
  $(this).click(function(){
     $tr=$(this).parents("tr");
   $tr.toggleClass("selected");
  });
  });
 }).hover(function (){
   
   $(this).addClass("hover"); 
    },function (){
    
   $(this).removeClass("hover"); 
   });
 
  //单选实现表格的隔行变色
  $(" #tb3 tr").each(function (index,domEle){
     $("input[name=ra]").each(function (index,domEle){
  var $tr;
  $("tr:even").addClass("odd");
  $("tr:odd").addClass("even");
     
  $(this).click(function(){
     $tr=$(this).parents("tr");
   $tr.toggleClass("selected");
   
  });
  $(this).blur(function(){
   $tr.toggleClass("selected"); 
  });
  
  });
 }).hover(function (){
   
   $(this).addClass("hover"); 
    },function (){
    
   $(this).removeClass("hover"); 
   });
 });


 
 


</script>
<body>
<span>隔行、滑动、点击、变色</span>
<table width=" 600" border="1" id="tb1">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
  </tr>
  <tr>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
  </tr>
</table>
二、多选框实现表格的隔行变色
<table width=" 600" border="1" id="tb2">
  <tr>
    <td>选择</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="box"></td>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
  </tr>
  <tr>
  <td><input type="checkbox" name="box"></td>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
  </tr>
  <tr>
  <td><input type="checkbox" name="box"></td>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
  </tr>
  <tr>
  <td><input type="checkbox" name="box"></td>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
  </tr>
</table>
二、单选实现表格的隔行变色
<table width=" 600" border="1" id="tb3">
  <tr>
    <td>选择</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
  </tr>
  <tr>
   <td><input type="radio" name="ra"></td>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
  </tr>
  <tr>
  <td><input type="radio" name="ra"></td>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
  </tr>
  <tr>
  <td><input type="radio" name="ra"></td>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
  </tr>
  <tr>
  <td><input type="radio" name="ra"></td>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
  </tr>
</table>


</body>
</html>

效果:

注:以上方法比较复杂,相信有更简单的方法实现以上功能,正在探索中.......希望有建议多多提点

点击单选按钮 实现表格的隔行变色

/*定义了三个样式*/ .once{ background-color:#0FC; } .after{ background-color:#F00; } .selected...
  • HUMHSX
  • HUMHSX
  • 2012年03月27日 17:36
  • 910

扩展GridView实现多选(全选)、点击行任意位置选择行、选中变色、添加双击事件等

主要功能: a.隔行色(颜色可自定义) b.点击行任意位置选择行 c.点击已选中行任意位置取消选择 d.选中行变色(颜色可自定义) e.多选全选功能 f.添加双击响应事件        ...

【小白成长史】checkbox相关单选,多选,点击图片选择

由于我做的操作是选中多个对象进行操作,可以一个个选,可以全选,所以我这里用到了集合 先说单选的时候,我给每一个checkbox都加了一个onchange='onChecked()'事件,下面的代码的...

RecyclerView之ViewHolder封装实现点击、长按、headerView和多选功能

多选效果图:BaseRecyclerViewHolder类:package com.danxx.brisktvlauncher.adapter;import android.animation.Ani...

ajax+js+dom+json+php+mysql实现漂亮的表格各行变色与google分页效果

include "../../../include/dbConn.php"; //查询数据库,得到总的记录数 $rs=mysql_query("select count(*) from area"...

ListView实现购物车功能包含单选与多选和修改数量

本来认为应该很容易,直接一个listview就能搞定了,但是写着写着就发现了问题,在listview中嵌入edittext时,点击条目编辑EditText时焦点会对不上, 点了此条目的edittext...

表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)

表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现多功能的表格的各行选择变色(点击、单选、多选)
举报原因:
原因补充:

(最多只允许输入30个字)