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="width: 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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(jquery)