JQuery学习笔记18——复选框控制表格行高亮

最新推荐文章于 2024-08-09 21:30:00 发布

weixin_30752699

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量91

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/guopei/articles/1530037.html

版权

1.判断当前行是否是高亮显示

if ($( this ).hasClass( " selected " ))

2.如果是高亮显示，则

$( this ).removeClass( " selected " ).find( " :checkbox " ).attr( " checked " , false );

3.如是不是高亮显示，则

$( this ).addClass( " selected " ).find( " :checkbox " ).attr( " checked " , true );

4.默认选中行需高亮显示

$( " tbody > tr:has(:checked) " ).addClass( " selected " );

完整代码：

Code
<!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>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        $("tbody > tr").click(function(){
            if($(this).hasClass("selected")){
                $(this).removeClass("selected").find(":checkbox").attr("checked",false);
            }else{
                $(this).addClass("selected").find(":checkbox").attr("checked",true);
            }
        });
        $("tbody > tr:has(:checked)").addClass("selected");
    })
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
    <thead>
        <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input type="checkbox" name="choice" value="" checked /></td><td>王五</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr>
    </tbody>
</table>
</body>
</html>

使用三元运算简写代码：

1 $( " tbody > tr " ).click(function(){
2             var hasselected = $( this ).hasClass( " selected " );
3             $( this )[hasselected ? " removeClass " : " addClass " ]( " selected " )
4             .find( " :checkbox " ).attr( " checked " , ! hasselected)
5 });

转载于:https://www.cnblogs.com/guopei/articles/1530037.html

weixin_30752699

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记18——复选框控制表格行高亮

1.判断当前行是否是高亮显示 if($(this).hasClass("selected"))2.如果是高亮显示，则$(this).removeClass("selected").find(":checkbox").attr("checked",false);3.如是不是高亮显示，则$(this).addClass("selected").find(":checkbox").attr("chec...
复制链接

扫一扫