jQuery表格单选

最新推荐文章于 2024-09-11 12:01:27 发布
最新推荐文章于 2024-09-11 12:01:27 发布
阅读量205 收藏
点赞数
分类专栏： jquery 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwj200810/article/details/84507685
版权 
<!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>
dwj200810
关注
专栏目录
jQuery表格应用-单选框复选框以及表格展开收缩
endless_lover的博客
04-24 970
$("tbody>tr:even")表示：取tbody下面偶数的tr标签 $("ul li:first")表示：取ul标签下第一个li标签 什么情况下使用什么选择器应该根据您的需求而定. 在jquery选择器中 parent > child 这种语法表示：在给定的父元素下匹配所有的子元素         $("ul li") 和 $("ul>li") $("ul>li") 符号，是父标
jQuery单选、全选
m0_57202083的博客
08-27 396
$(":checkbox[name='roy']" 指的是读取所有名字为roy的checkbox多选框 .attr("checked",true) 获取到的元素标签添加一个名字为checked的属性，值为true，就是选中的意思； .attr("标签属性名","属性值") <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &l..
jQuery表格行全选反选单选代码
09-17
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
jQuery 表格单选和全选
caohongxia666的博客
01-20 161
// 表格页面 全选 单选 $('#deveicCollector .list_page .check_all_child').on('click', function () { var value = $(this).attr('checked'); if (value) { $(this).attr('checked', false); $('#deveicCollector .li...
jquery实现表格的全选 和单选
tomatoFIREegg的博客
06-15 1069
$("#checkAll").click(function(){ debugger; $(":checkbox[name='checkone']").prop("checked",this.checked); }); $("input[name='checkone']").click(f
jQuery 实现表格与 ckeckbox 的全选、单选功能
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-09 474
功能点 1. 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时，头checkbox去选。当所有数据行的checkbox全选时，头的checkbox也选上。 html代码示例，关注高亮部分即可： jQuery代码，可以参考如下： 功能点 2. 表格无数据行时，隐藏下面两个铵钮，反之显示它们 如下面代码示例： ...
jQuery表单选择器
zwt_1的博客
08-08 605
表单选择器 jQuery中专门加入表单选择器，利用这些选择器可以很方便的获取到表单的某个或某类型的元素。 表单选择器 选择器 描述 返回 示例 :input 选取所有的&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;和&lt;button&gt;元素 集合元素 $("#form1 :input")选取表单for...
jQuery表格行全选反选单选特效代码
03-20
总的来说，jQuery表格行全选反选单选特效是通过事件监听、状态管理及样式控制实现的，而`tableCheckbox.js`插件则提供了一种方便的方式来封装和扩展这些功能，使得开发者能够更专注于业务逻辑，而不是基础的DOM操作...
jQuery实现表格与ckeckbox的全选与单选功能
01-21
先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。 先看看下面的效果： 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时，头checkbox去选。当所有数据行的...
Jquery为单选框checkbox绑定单击click事件
12-11
input id=”checkbox-518″ class=”imagezz” name type=”checkbox” value=”518″> </dd> 选中事件（根据选中情况修改上一层背景）： 代码如下: var $test_image_check_box_click = function() { if ($(this)...
jquery实现全选、全不选以及单选功能
12-30
效果图： 代码如下： <link rel=stylesheet href=http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css rel=external nofollow > [removed] [removed] <t
jQuery表格行全选反选单选代码.zip
07-05
jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多选。
jquery实现带单选按钮的表格行选中时高亮显示
10-27
本文将探讨如何使用jQuery库来实现一个功能，即当用户点击表格行时，该行会高亮显示，并且行内的单选按钮会被选中。这种交互设计能够直观地反馈用户的选择，使得操作更为直观易懂。 首先，我们需要一个简单的HTML...
jquery快速实现全选和单选
米 柴的博客
07-02 538
jquery实现全选和单选
jQuery对于单选表单(radio)以及其它表单取值
lichuhui
11-20 322
jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作; 1.假如我们有如下页面： [code="java"] [/code] 2.下面来看怎么取得FORM中的各种值等等： [code="java"] function get_form_value(){ /*获得TEXT.AREATEXT的值*/ ...
使用jQuery实现表格的单选复选效果
qq_42313028的博客
03-23 751
使用jQuery实现表格的单选/复选效果 当表格中所有内容选中是时,随便取消一条勾选,对应表头的选择框应该取消勾选.实现逻辑就是,点击内容的勾选框时,判断列表内是否还有没有选中的(除表头外),如果没有就将表头的选择框变更勾选状态,否者取消勾选. css table { border: 1px solid black; border-collapse: collapse; text-align: center; } table thead tr th { border: 1px s
表格的变色问题
mingtianhaiyouwo的博客
12-07 360
 2011-07-21 16:15 by Rollen Holt, 93 阅读, 0 评论, 收藏, 编辑 起初的样式如下： 选择之后的样式如下： 代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
XHTML简介
最新发布
qq_48501521的博客
09-11 979
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
jQuery表格与表单操作技巧总结
- `end()`方法返回原始jQuery对象，`find(":radio").attr("checked",true)`则选中当前行内的单选按钮（假设存在）。 3. **实时搜索** - `$("#filterName").keyup(function() {...})`监听ID为`filterName`的输入框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值