jQuery表格单选

最新推荐文章于 2021-03-23 17:28:36 发布
最新推荐文章于 2021-03-23 17:28:36 发布
阅读量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表格行全选反选单选特效代码
03-20
总的来说，jQuery表格行全选反选单选特效是通过事件监听、状态管理及样式控制实现的，而`tableCheckbox.js`插件则提供了一种方便的方式来封装和扩展这些功能，使得开发者能够更专注于业务逻辑，而不是基础的DOM操作...
jquery快速实现全选和单选
米 柴的博客
07-02 539
jquery实现全选和单选
使用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
jquery实现表格的全选 和单选
tomatoFIREegg的博客
06-15 1070
$("#checkAll").click(function(){ debugger; $(":checkbox[name='checkone']").prop("checked",this.checked); }); $("input[name='checkone']").click(f
jQuery表格行全选反选单选代码
09-17
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
jQuery简单实现遍历单选框的方法
10-20
它们分别是《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》以及《jquery选择器用法总结》。这些主题的...
jquery实现带单选按钮的表格行选中时高亮显示
10-27
本文将探讨如何使用jQuery库来实现一个功能，即当用户点击表格行时，该行会高亮显示，并且行内的单选按钮会被选中。这种交互设计能够直观地反馈用户的选择，使得操作更为直观易懂。 首先，我们需要一个简单的HTML...
jQuery实现表格与ckeckbox的全选与单选功能
01-21
先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。 先看看下面的效果： 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时，头checkbox去选。当所有数据行的...
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表格应用-单选框复选框以及表格展开收缩
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 实现表格与 ckeckbox 的全选、单选功能
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-09 474
功能点 1. 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时，头checkbox去选。当所有数据行的checkbox全选时，头的checkbox也选上。 html代码示例，关注高亮部分即可： jQuery代码，可以参考如下： 功能点 2. 表格无数据行时，隐藏下面两个铵钮，反之显示它们 如下面代码示例： ...
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获取表格中动态单元格内单选框和多选框的值
weixin_30252155的博客
10-23 420
1.通过table的Id获取到每行（tr）的元素， $("#table_xuan tr") 如果过滤第一行和最后一行 $("#table_xuan tr:not(:first):not(:last)")2.通过 each（）函数遍历 每一行 $("#table_xuan tr").each(function(i)){ // i 代表的是行数　　　　$(this).childr...
jquery自定义单选框的方法
newmiracle学习天地
05-18 526
jquery自定义单选框的方法 直接用div做 再加事件 基本原理就这样 1 多选的时候 点击1个div 就加属性记录选中了 2 点击1个 其他几个消失。。查看原文：http://newmiracle.cn/?p=1606
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完成带单选按钮的表格行高亮显示
jishublog
07-31 219
jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的，这次写的是单选框的，有时查询的时候，只能选择一条记录，如果将选中的这条记录的行高亮显示，同时该行的单选按钮也被选中了，这样会提高用户的体验的。如今的时代，就是用户体验的时代。 效果如下： CSS文件如下如下所示： .selected{ background:#FF6500; colo...
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、付费专栏及课程。

余额充值