zoukankan      html  css  js  c++  java
  • 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>


    效果图例如以下:












  • 相关阅读:
    日志命令
    QPS、TPS、PV、UV、GMV、IP、RPS
    Tmux实践
    1-2+3-4+5-6....-100 除了88以外其他数字的和 python 实现
    MCNN: 多列卷积神经网络的单图像人群计数
    facenet-pytorch库的简单使用
    SENet笔记
    目标检测 anchor的生成
    matplotlib动图绘制
    感知机算法及其对偶形式
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7284892.html
Copyright © 2011-2022 走看看