Jquery 评分

最新推荐文章于 2024-06-06 10:05:55 发布

永远爱好写程序

最新推荐文章于 2024-06-06 10:05:55 发布

阅读量1k

点赞数

分类专栏： Jquery_基础

本文链接：https://blog.csdn.net/limlimlim/article/details/9195205

版权

Jquery_基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>评分</title>
    <style type="text/css">
        #tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;}
        #tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;}
        #main{width:100px;text-align:center;margin:0px auto;}
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $tds;
        var div;
        var bClick = false;

        $(function () {
            $tds = $("#tbl td");
            div = document.getElementById("main");
            bClick = false;
            $tds.mouseover(function () {
                if (!bClick) {
                    var $currentTd = $(this);
                    $currentTd.css("backgroundColor", "green");
                    var $preTds = $currentTd.prevAll("td");
                    $preTds.css("backgroundColor", "green");
                    var $nextTds = $currentTd.nextAll("td");
                    $nextTds.css("backgroundColor", "white");
                }
            });
            $tds.mouseout(function () {
                if (!bClick) {
                    $tds.css("backgroundColor", "white");
                }
                //alert(div.innerHTML);
            });
            $tds.click(function () {
                bClick = true;
                var $currentTd = $(this);
                $currentTd.css("backgroundColor", "green");
                var $preTds = $currentTd.prevAll("td");
                $preTds.css("backgroundColor", "green");
                var $nextTds = $currentTd.nextAll("td");
                $nextTds.css("backgroundColor", "white");
            });
        });
    </script>

</head>
<body>
    <div id="main">
        <table id="tbl">
            <tbody>
                <tr>
                    <td>★</td>
                    <td>★</td>
                    <td>★</td>
                    <td>★</td>
                    <td>★</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

永远爱好写程序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 评分

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 评分 #tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;}
复制链接

扫一扫