jquery对表格的操作

原创 2012年03月26日 21:21:38

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Jquery对表格进行操作——添加行、删除行和绑定行

表格操作 body{font-size:12px}table{font-size:12px;width:500px;border-collapse:collapse;}div{line-height:...

jquery表格排序操作

  • 2008-09-26 17:24
  • 47KB
  • 下载

jquery表格增加删除行操作

jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效丨CsrCode.Cn 添加一行  删除一行  上移  下移 序号步骤名称步骤描述相关操作 var cu...

jquery操作表格增加删除

  • 2014-12-10 22:17
  • 44KB
  • 下载

比较Javascript 和 Jquery 操作表格

这是以前做过的使用dom对象操作表格的例子,还不错,分享分享~~呵呵!! new document body{ width:980px; margin:0px ...

4jquery对表格表单的操作

  • 2013-12-06 14:11
  • 1.06MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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