当前位置： 代码迷 >> Web前端 >> jQuery报表单选
  详细解决方案

jQuery报表单选

热度：331   发布时间：2013-12-02 12:00:40.0
jQuery表格单选
<!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>jquery表格修饰：隔行换色,点击变色,多选单选变色</title>  
</head>
<script language=javascript src="http://code.jquery.com/jquery-1.4.2.min.js"></script>  
<style>  

</style>  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
    /*   
    jQuery实现点击复选框即高亮显示选中行 全选、反选   
    详见http://www.cnblogs.com/chengulv/archive/2012/02/25/2368055.html  
    */  
    (function ($) {  
        $.fn.extend({  
            "alterBgColor": function (options) {  
                var prevselitem = null;  
                //设置默认值  
                options = $.extend({  
                   // style: "0",  
                    odd: "odd", /* 偶数行样式*/  
                    even: "even", /* 奇数行样式*/  
                    over: "over", /* 鼠标掠过*/  
                    selected: "selected" /* 选中行样式*/  
                }, options);  
				
                //样式4       
                    //其他列 为单选  
                    $('tbody>tr td:not(:first-child)', this).click(function () { 
                        var p = $(this).parents("tr");  
                        p.addClass(options.selected).siblings().removeClass(options.selected).find(':checkbox:first').attr('checked', false);  
                        p.find(':checkbox:first').attr('checked', true);  
                    });   
            }  
        });  
    })(jQuery);  
  
  
    $(document).ready(function () {  	
	
		$(':checkbox[name=tablechoice]').each(function(){
            $(this).click(function(){
                if($(this).attr('checked')){
                    $(':checkbox[name=tablechoice]').removeAttr('checked');
                    $(this).attr('checked','checked');
                }
            });
        });
			
        $("#listTable").alterBgColor(); //可以链式操作
		
		
    });  
    


 //-->  
</SCRIPT>  
</head>  
  
<body>  

<h1>Demo2--隔行,滑动,点击 变色.+  多选框选中的行 变色.</h1>  
<table class="dataTable" id='listTable'>  
<thead>  
<tr>  
 <th></th>  
<th>姓名</th>  
 <th>性别</th>  
 <th>暂住地</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
 <td><input type="checkbox"   name="tablechoice" value="" /></td>  
   <td>张山</td>  
 <td>男</td>  
 <td>浙江宁波</td>  
</tr>  
<tr>  
 <td><input type="checkbox" name="tablechoice"  value="" /></td>  
   <td>李四</td>  
 <td>女</td>  
 <td>浙江杭州</td>  
</tr>  
<tr>  
 <td><input type="checkbox" name="tablechoice" value=""  checked/></td>  
    <td>王五</td>  
 <td>男</td>  
 <td>湖南长沙</td>  
</tr>  
<tr>  
 <td><input type="checkbox" name="tablechoice" value=""  /></td>  
  <td>找六</td>  
 <td>男</td>  
 <td>浙江温州</td>   
</tr>  
<tr>  
 <td><input type="checkbox" name="tablechoice" value=""  /></td>  
   <td>Rain</td>  
 <td>男</td>  
 <td>浙江杭州</td>  
</tr>  
<tr>  
 <td><input type="checkbox" name="tablechoice" value="" /></td>  
 <td>MAXMAN</td>  
 <td>女</td>  
 <td>浙江杭州</td>  
</tr>  
</tbody>  
</table>  
   
   
  
</body>  
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.