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>


    效果图例如以下:












  • 相关阅读:
    插入迭代器
    operator[] 和 insert
    STL注意比较函数
    remove、erase
    reserve的使用
    allocator
    【转】【模板】求割点和桥
    【模拟,时针分针秒针两两夹角】【没有跳坑好兴奋】hdu
    【强连通分量分解】
    【模拟ACM排名】ZOJ-2593 Ranking (Andrew Stankevich’s Contest #5)
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7284892.html
Copyright © 2011-2022 走看看