Jquery 评分

<!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>

你可能感兴趣的:(Jquery 评分)