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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    剖析C语言中a=a+++++a的无聊问题
    [转]精确到1%秒的单片机计时器汇编程序
    [转]学DSP、FPGA、ARM,哪个更有前途?
    【Java】Eclipse导出JAR包
    二维码生成器(支持历史记录点击和清空)
    移动端开发注意之一二
    localStorage实现按钮点击禁用
    JavaScript之查找元素
    扒拉扒拉table
    解惑之JavaScript
  • 原文地址:https://www.cnblogs.com/ylbtech/p/2875626.html
Copyright © 2011-2022 走看看