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代码实现表格行列的增删操作(每行编号随之修改)

目标效果: 1.点击addRow按纽实现行的增加,并且编号连续呈増序。 2.点击deleteRow按纽实现行的删除,并且被删行对象后面的行编号与被删对象前面的行编号能连贯起来。(下示例从上...
  • felixkiki
  • felixkiki
  • 2016年01月03日 22:14
  • 2127

jquery实现动态操作table

使用jquery实现动态创建行、删除行、行内计算、提交表格数据。 /js/jquery-1.11...
  • qq_33556185
  • qq_33556185
  • 2016年11月25日 18:59
  • 3296

使用jQuery实现table表格排序js插件

在前不久做的一个web项目中,需要实现js表格排序的效果,当时为了省事,就在网上找了几个相关的js插件,像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态...
  • limengmeng9006
  • limengmeng9006
  • 2013年12月16日 14:07
  • 4788

jquery表格排序操作

  • 2008年09月26日 17:24
  • 47KB
  • 下载

15款提高表格操作的jQuery插件

  • 2012年12月07日 00:09
  • 548KB
  • 下载

使用 Jquery 操作表格

  • 2009年07月28日 11:12
  • 36KB
  • 下载

jquery操作表格增加删除

  • 2014年12月10日 22:17
  • 44KB
  • 下载

4jquery对表格表单的操作

  • 2013年12月06日 14:11
  • 1.06MB
  • 下载

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

  • 2014年03月22日 14:37
  • 2KB
  • 下载

JQuery操作表格(附源码)实现tr上下移动。

  • 2010年03月21日 22:19
  • 17KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery对表格的操作
举报原因:
原因补充:

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