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

原创 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...

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

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

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

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

ListView,Expandable 自定义单选,多选功能实现及注意

经常会遇到很多人问,有没有ListView单选多选的实现的Demo之类的问题。因此,再次贴出一些相关代码,和说明注意事项。 首先介绍的是关于ListView(在此布局文件不与贴出,item的布局主要...

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

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

ExpandableListView实现组内单选,组间多选功能

这是未选择
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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