JAVASCRIPT--评分练习问题

<!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>
    <script type="text/javascript">
        function indexOf(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element)
                    return i;
            }
            return -1;
        }
        function initEvent() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            tds[0].style.background = "red";
            for (var i = 1; i < tds.length; i++) {
                var td = tds[i];
                td.style.cursor = "pointer";
                 td.onmouseover = TdOnMouseover; //鼠标经过的时候评分栏的效果
                 td.onclick = TdOnClick;
            }
        }
        function TdOnMouseover() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            var index=indexOf(tds,this);
            tds[0].style.background = "red";
            for (var i = 1; i < tds.length; i++) {
                var td = tds[i];
                td.style.background = "red";
            }
            for (var i = index + 1; i < tds.length; i++) {
                var td = tds[i];
                td.style.background = "white";
            }
        }
              function TdOnClick() {
            var tableRating = document.getElementById("tableRating");
            var tds = tableRating.getElementsByTagName("td");
            var index = indexOf(tds, this);
            for (var i = 0; i <= index; i++) {
                var td = tds[i];
                td.style.background = "red";
            }
            for (var i = index + 1; i < tds.length; i++) {
                var td = tds[i];
                td.style.background = "white";
            }
        }
 
    </script>
</head>
<body onload="initEvent()">
 <table id="tableRating">
  <tr>
   <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
  </tr>
 </table>
</body>
</html>
代码可以直接测试，问题是：在未点击之前，鼠标经过时td背景色改变，鼠标离开则变回原样，然后鼠标点击后，完成评分，离开鼠标也不再改变。

解决方案 »

  1.   

    再写个鼠标离开的方法。。看完你代码。。没发现鼠标离开则变回原样这个方法就只有over 和click
      

  2.   


    <!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>
        <script type="text/javascript">
            function indexOf(arr, element) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == element)
                        return i;
                }
                return -1;
            }
            function initEvent() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                tds[0].style.background = "red";
                for (var i = 0; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.cursor = "pointer";
                     td.onmouseover = TdOnMouseover; //鼠标经过的时候评分栏的效果
     td.onmouseout=function(){this.style.background="";}
                     td.onclick = TdOnClick;
                }
            }
            function TdOnMouseover() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index=indexOf(tds,this);
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
            }
                  function TdOnClick() {            var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
               /* for (var i = 0; i <= index; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }*/
                for (var i = 0; i < tds.length; i++) {
                     tds[i].onmouseover =function(){};
     tds[i].onmouseout=function(){}
                     tds[i].onclick =function(){};
                }
            }
     
        </script>
    </head>
    <body onload="initEvent()">
     <table id="tableRating">
      <tr>
       <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
      </tr>
     </table>
    </body>
    </html>只是粗略改了下，看看行不？
      

  3.   


    <!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>
        <script type="text/javascript">
            function indexOf(arr, element) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == element)
                        return i;
                }
                return -1;
            }
            function initEvent() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                tds[0].style.background = "red";
                for (var i = 0; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.cursor = "pointer";
                     td.onmouseover = TdOnMouseover; //鼠标经过的时候评分栏的效果
     td.onmouseout=function(){this.style.background="";}
                     td.onclick = TdOnClick;
                }
            }
            function TdOnMouseover() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index=indexOf(tds,this);
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
            }
                  function TdOnClick() {            var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
               /* for (var i = 0; i <= index; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }*/
                for (var i = 0; i < tds.length; i++) {
                     tds[i].onmouseover =function(){};
     tds[i].onmouseout=function(){}
                     tds[i].onclick =function(){};
                }
            }
     
        </script>
    </head>
    <body onload="initEvent()">
     <table id="tableRating">
      <tr>
       <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
      </tr>
     </table>
    </body>
    </html>
      

  4.   

    <!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>
        <script type="text/javascript">
            function indexOf(arr, element) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == element)
                        return i;
                }
                return -1;
            }
            function initEvent() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.cursor = "pointer";
                    td.onmouseover = TdOnMouseover;
                      //鼠标经过的时候评分栏的效果
                    td.onclick = TdOnClick;
                    td.onmouseleave = TdOnMouseleave;
                }
            }
            function TdOnMouseover() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index+1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
                
            }
            function TdOnMouseleave() {            var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
            }
                    function TdOnClick() {             
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                for (var i = 0; i <= index; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }           
            }
     
        </script>
    </head>
    <body onload="initEvent()">
     <table id="tableRating">
      <tr>
       <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
      </tr>
     </table>
    </body>
    </html>
      

  5.   

    我这个实现了鼠标leave后恢复原状。。但就是CLICK 实现不了了
      

  6.   

    <!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>
        <script type="text/javascript">
            function indexOf(arr, element) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == element)
                        return i;
                }
                return -1;
            }
            function initEvent() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.cursor = "pointer";
                    td.onmouseover = TdOnMouseover;
                      //鼠标经过的时候评分栏的效果
                    td.onclick = TdOnClick;
                    td.onmouseleave = TdOnMouseleave;
                }
            }
            function TdOnMouseover() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                tds[0].style.background = "red";
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index+1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
                
            }
            function TdOnMouseleave() {            var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                for (var i = 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
            }
                    function TdOnClick() {             
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                var index = indexOf(tds, this);
                for (var i = 0; i <= index; i++) {
                    var td = tds[i];
                    td.style.background = "red";
                }
                for (var i = index + 1; i < tds.length; i++) {
                    var td = tds[i];
                    td.style.background = "white";
                }
                td.onmouseleave = false;
               
            }
     
        </script>
    </head>
    <body onload="initEvent()">
     <table id="tableRating">
      <tr>
       <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
      </tr>
     </table>
    </body>
    </html>
    应该是实现了
      

  7.   

    <!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>
         td{
         padding: 0;
         }
         td.mouseon{
         background-color: red;
         }
        </style>
        <script type="text/javascript">
            function initEvent() {
                var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
            tds[0].setAttribute('class', 'mouseon');
                tableRating.onmouseover = TdOnMouseover;
                tableRating.onmouseout = TdOnMouseout;
                tableRating.onclick = TdOnClick;
            }
            function TdOnMouseover(event) {
             var event = event? event : window.event,
             target = event.target;
             if(target.tagName === 'TD'){
             target.setAttribute('class', 'mouseon');
             var prevElem = target.previousSibling;
             while(prevElem){
             if(prevElem.nodeType === 1){
             prevElem.setAttribute('class', 'mouseon');
             }
             prevElem = prevElem.previousSibling;
             }
             var nextElem = target.nextSibling;
             while(nextElem){
             if(nextElem.nodeType === 1){
             nextElem.removeAttribute('class', 'mouseon');
             }
             nextElem = nextElem.nextSibling;
             }
            }
            return false;
            }
            function TdOnMouseout(event){
             var event = event? event : window.event,
             target = event.target,
             toElem = event.relatedTarget;
             if(toElem.tagName === 'BODY' || toElem.tagName === 'TABLE' || toElem.tagName === 'TBODY' || toElem.tagName === 'TR'){
             var tableRating = document.getElementById("tableRating");
                var tds = tableRating.getElementsByTagName("td");
                for(var i = tds.length - 1; i >= 0; i--){
                if(i === 0){
                tds[i].setAttribute('class', 'mouseon');
                }else{
                tds[i].removeAttribute('class', 'mouseon');
                }
                }
             }
            }
            function TdOnClick() {
                var tableRating = document.getElementById("tableRating");
                tableRating.onmouseover = function(){};
                tableRating.onmouseout = function(){};
            }
     
        </script>
    </head>
    <body onload="initEvent()">
    <table id="tableRating">
    <tbody>
    <tr>
    <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>