代码改变世界

表格的变色问题

  Rollen Holt  阅读(434)  评论(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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title></title>
 
<link href="css/style.css" rel="stylesheet" type="text/css" />
 
<!--   引入jQuery -->
 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
  $(function(){
 
        $("tbody>tr:odd").addClass("odd");
 
        $("tbody>tr:even").addClass("even");
 
        $('tbody>tr').click(function() {
 
            //判断当前是否选中
 
            var hasSelected=$(this).hasClass('selected');
 
            //如果选中,则移出selected类,否则就加上selected类
 
            $(this)[hasSelected?"removeClass":"addClass"]('selected')
 
                //查找内部的checkbox,设置对应的属性。
 
                .find(':checkbox').attr('checked',!hasSelected);
 
        });
 
        // 如果复选框默认情况下是选择的,则高色.
 
        $('tbody>tr:has(:checked)').addClass('selected');
 
  })
 
</script>
 
</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='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>Rain</td><td>男</td><td>浙江杭州</td></tr>
 
            <tr><td><input type="checkbox" name="choice" value="" /></td>
 
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
 
        </tbody>
 
    </table>
 
</body>
 
</html>

编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示