• JQuery编程demo练习


    JQuery练习demo:
        编敲代码,实现:
        1、选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色)。

        2、取消选中复选框时,所在行的背景色恢复。


    ===================================答案=================================

    html代码:

    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script>
    </head>
    <style>
    .classw{
    	background-color:#CFF;
    }
    .classg{
    	background-color:#FFC;	
    }
    .classy{
    	background-color:#FF0;
    }
    </style>
    <body>
    <h3 align="center">员工信息</h3>
    <table border="1px" cellspacing="0" width="50%" align="center">
    	<tr>
         	<th></th>     
        	<th>姓名</th>
            <th>薪水</th>
            <th>年龄</th>      
        </tr>
        <tr class="classw">
        	<td>
            	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
            </td>
            <td>
            	张三
            </td>
            <td>
            	20000
            </td>
            <td>
            	23
            </td>
        </tr>
        <tr class="classg">
        	<td>
            	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
            </td>
            <td>
            	李四
            </td>
            <td>
            	22000
            </td>
            <td>
            	22
            </td>
        </tr>
        <tr class="classw">
        	<td>
            	<input type="checkbox" value="1" name="check" onclick="myselect()" />
            </td>
            <td>
            	王五
            </td>
            <td>
            	14000
            </td>
            <td>
            	26
            </td>
        </tr>
        <tr class="classg">
        	<td>
            	<input type="checkbox" value="1" name="check" onclick="myselect()"/>
            </td>
            <td>
            	马六
            </td>
            <td>
            	15000
            </td>
            <td>
            	21
            </td>
        </tr>
    </table>
    </body>
    <script>
    	$("th").css("background-color","#CCC");
    
    	
    function myselect(){
    	$("table :checkbox:checked").parent().parent().addClass("classy");
    	$("table :checkbox").not("input:checked").parent().parent().removeClass("classy");
    	
    	
    }
    
    </script>
    </html>


    效果图例如以下:












  • 相关阅读:
    Python 必备神器
    python 常用库
    Sublime Text3 配置 Python2 Python3
    Python JSON
    Sublime Text3 3143 注册码
    EFCode First 导航属性
    EF Code First:实体映射,数据迁移,重构(1)
    Entity Framework 复杂类型
    EF 7 Code First
    EF Code First 导航属性 与外键
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7284892.html
Copyright © 2020-2023  润新知