关闭

jquery对表格的操作

182人阅读 评论(0) 收藏 举报

<!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>

<style> 
.even{ 
    background-color:#cccccc; 
    } 
.odd{ 
    background-color:#ffff99;    
        } 
.d{ 
    background-color:#9F9; 
    } 
.input1{ 
        background:#0C9; 
        } 
</style>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>

 $(document).ready(function(){ 
    //关于单选框
 
        $("tr:even").addClass("even");
       //设置奇数行的背景颜色
         $("tr:odd").addClass("odd");
   $("tr").mouseover(function(){
 
      //  $(this).removeClass("even odd");
  
        $(this).toggleClass("d"); 
  
    });
 
   
     $("tr").mouseout(function(){ 
 
        $(this).toggleClass("d");
  
        $("tr:even").addClass("even");
  
        $("tr:odd").addClass("odd"); 
  
    }); 
 
 
       $("input[name=ra]").click(function(){ 
    $("input[name=ra]").each(function(){ 
            if(this.checked==true){ 
   
            $(this).parent().parent().addClass("input1"); 
   
            } 
   
          else{ 
   
                $(this).parent().parent().removeClass("input1"); 
                } 
          
        }); 
    }); 
   
   });    
   
    </script>
</head>
<body>


<!---------------单选框表格------------------>
<table width="600" border="1">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>手机</td>
    <td>QQ</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra1" name="ra"/>张小小</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra2" name="ra"/>王红</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra3" name="ra"/>赵飞</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra4" name="ra"/>吴明</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra5" name="ra"/>张利</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra6" name="ra"/>李强</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra7" name="ra"/>李明</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra8" name="ra"/>李明</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra9" name="ra"/>李明</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
  <tr>
    <td><input type="radio" id="ra10" name="ra"/>李明</td>
    <td>男</td>
    <td>102</td>
    <td>119119119119</td>
    <td>13435355</td>
  </tr>
 
</table>
<br /><br /><br /><br />

</body>
</html>

0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52606次
    • 积分:1253
    • 等级:
    • 排名:千里之外
    • 原创:82篇
    • 转载:1篇
    • 译文:0篇
    • 评论:5条
    最新评论