zoukankan      html  css  js  c++  java
  • jQuery:1.5.4.3,表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式)

    ylbtech-jQuery:jQuery学习

    jQuery语法实例

    表格变色
    效果截图
     
    jQuery:1.5.4.3,表格变色(单击行,把当行的单选按钮(radio)设为选中状态,并应用当前样式) HTML代码返回顶部
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .even
            {
                background-color: Gray;
            }
            /*奇数行样式*/
            .odd
            {
                background-color: Lime;
            }
            /*偶数行样式*/
            .selected
            {
                background-color: Yellow;
            }
        </style>
        <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("tbody>tr:even").addClass("even");  /*给奇数行添加样式*/
                $("tbody>tr:odd").addClass("odd");  /*偶数行添加样式*/
    
                /*当单击表格行时,把当前设为选中状态样式
                ,并把单选按钮设为选中状态*/
                $("tbody>tr").click(function () {
                    $(this).addClass('selected')
                    .siblings().removeClass('selected')
                    .end()
                    .find(":radio").attr("checked", true);
                });
            });
        </script>
    </head>
    <body>
        <h3>
            表格变色</h3>
        <table style=" 300px;">
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        name
                    </th>
                    <th>
                        sex
                    </th>
                    <th>
                        age
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="radio" name="items" />
                    </td>
                    <td>
                        rain
                    </td>
                    <td>
                        male
                    </td>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="items" />
                    </td>
                    <td>
                        rain
                    </td>
                    <td>
                        male
                    </td>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="items" />
                    </td>
                    <td>
                        rain
                    </td>
                    <td>
                        male
                    </td>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="items" />
                    </td>
                    <td>
                        rain
                    </td>
                    <td>
                        male
                    </td>
                    <td>
                        23
                    </td>
                </tr>
                <tbody>
        </table>
    </body>
    </html>
    jQuery:1.5.4.3.B,效果截图返回顶部

     ylbtech-iquery-table3

    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Avoiding the Backup of Online Redo Logs
    RMAN-20201: datafile not found in the recovery catalog
    ORA-15081: failed to submit an I/O operation to a disk
    字符串替换数字问题
    jstl换行符处理
    字符串匹配问题
    careercup题目20131013
    careercup题目20131010
    careercup题目201330928
    面试题(一)
  • 原文地址:https://www.cnblogs.com/ylbtech/p/2875626.html
Copyright © 2011-2022 走看看