2012-05-29 5 views
0

Я пытаюсь выделить строку таблицы, используя метод Jookery .hover().JQuery .hover не работает

У меня есть следующий код:

var x; 
var namen; 
window.onload = function(){ 
    x = true; 
    y = true; 
    $("submitnieuw").observe('click', addturf); 
    $("submitdelete").observe('click', verwijderturf); 
    $("stats").on("click", "tr", select); 
    setInterval(function(){ 
     jQuery("#recent").load("vandaag.php"); 
     if(x){ 
      jQuery("#stats").load("stats.php"); 
     } 
    }, 10000); 
    $("tr").not(':first').hover(
     function() { 
      $(this).addClassName("selected"); 
     }, 
     function() { 
      $(this).removeClassName("selected"); 
     } 
    ); 
    alert("test"); 
}; 

function select(naam){ 
    //highlight the selected list element 
    if (y){ 
     var name = naam.findElement('tr').id; 
     if (name !== ""){ 
      x = false; 
      y = false; 
      jQuery.ajax('details.php',{ 
       data: { 
        'Naam': name, 
        'door': $("door2").value 
       }, 
       type: 'post', 
       success: function(data){ 
        $("stats").innerHTML = data; 
       }, 
       error: ajaxFailure 
      }); 
     } 
    } 
    else{ 
     x = true; 
     y = true; 
     jQuery("#stats").load("stats.php"); 
     jQuery("#recent").load("vandaag.php"); 
    } 
} 

function verwijderturf() { 
    var box = document.getElementById("naamverwijder"); 
    var naam = box.options[box.selectedIndex].value; 
    document.getElementById("naamnieuw").selectedIndex=0; 
    $("redennieuw").value = ""; 
    jQuery.ajax('server.php',{ 
     data: { 
      'mode': 'verwijderturf', 
      'naam': naam, 
      'door': $("door2").value 
     }, 
     type: 'post', 
     success: update, 
     error: ajaxFailure 
    }); 
} 


function addturf() { 
    var box = document.getElementById("naamnieuw"); 
    var naam = box.options[box.selectedIndex].value; 
    document.getElementById("naamnieuw").selectedIndex=0; 
    var reden = $("redennieuw").value; 
    $("redennieuw").value = ""; 
    jQuery.ajax('server.php',{ 
     data: { 
      'mode': 'addturf', 
      'naam': naam, 
      'door': $("door2").value, 
      'reden': reden 
     }, 
     type: 'post', 
     success: update, 
     error: ajaxFailure 
    }); 
} 

function update(ajax){ 
    jQuery("#stats").load("stats.php"); 
    jQuery("#recent").load("vandaag.php"); 
} 


function ajaxFailure(ajax, exception) { 
    alert("Error making Ajax request:" + 
     "\n\nServer status:\n" + ajax.status + " " + ajax.statusText + 
     "\n\nServer response text:\n" + ajax.responseText); 
    if (exception) { 
     throw exception; 
    } 
} 

выбран определенный в CSS я включил в мой index.php.

Это мой index.php

<?php 
    include_once("db.php"); 
    session_start(); 
    if (!isset($_SESSION['uid'])){ 
     header("location:main_login.php"); 
     exit(); 
    } 
    if (!isset($_SESSION['upass'])){ 
     header("location:main_login.php"); 
     exit(); 
    } 
    $sql="SELECT * FROM users WHERE Naam='".$_SESSION['uid']."' AND Wachtwoord='".$_SESSION['upass']."'"; 
    $result=mysql_query($sql); 
    $count=mysql_num_rows($result); 
    if($count < 1){ 
     header("location:main_login.php"); 
     exit(); 
    } 

?> 


<?php 
    $date = date("y-m-d"); 
    $vandaag = mysql_query("SELECT Type, Naam, Reden, Door FROM turfjes WHERE turfjes.Datum = '" . $date . "'"); 
    $names = mysql_query("SELECT Naam From users"); 
    $names2 = mysql_query("SELECT Naam From users"); 
    $names3 = mysql_query("SELECT Naam From users"); 
?> 


<!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> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Tomaten turfjes pagina | 258</title> 
     <link rel="stylesheet" type="text/css" href="css/reset.css" media="all" /> 
     <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script> 
      jQuery.noConflict(); 
     </script> 
     <script src="js/prototype.js" type="text/javascript"> </script> 
     <script src="js/scriptaculous.js" type="text/javascript"></script> 
     <script src="js/script.js" type="text/javascript"> </script> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="header"> 
      </div> 
      <div id="info"> 
       <div id="recent">    
        <fieldset> 
         <legend>Vandaag</legend> 
         <table border="0"> 
          <tr> 
          <td>Type</td> 
          <td>Naam</td> 
          <td>Reden</td> 
          <td>Door</td> 
          <?php 
           while($a = mysql_fetch_array($vandaag)){ 
          ?>  <tr> 
            <td><?php echo($a['Type']);?></td> 
            <td><?php echo($a['Naam']);?></td> 
            <td><?php echo($a['Reden']);?></td> 
            <td><?php echo($a['Door']);?></td> 
            </tr> 
          <?php 
           } 
          ?> 
         </table> 
        </fieldset> 
       </div> 
       <div id="stats">     
        <fieldset> 
         <legend>Turfjesteller</legend> 
         <table border="0"> 
          <tr> 
          <td>Naam</td> 
          <td>Aantal</td> 
          <td>Gedaan</td> 
          <td>Resterend</td> 
          </tr> 
          <?php 
           while($r = mysql_fetch_array($names)){ 
           echo("<tr id=".$r['Naam'].">"); 
          ?> 
            <td><?php echo($r['Naam']);?></td> 
          <?php 
             $sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'"; 
             $result=mysql_query($sql); 
             $count=mysql_num_rows($result); //count = adtjes 
             $sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'"; 
             $result2=mysql_query($sql2); 
             $count2=mysql_num_rows($result2); //count2 = turfje  
          ?> 
            <td><?php echo($count2);?></td> 
            <td><?php echo($count);?></td> 
            <td><?php echo($count2-$count);?></td> 
            </tr> 
          <?php 
           } 
          ?> 
         </table> 
        </fieldset> 
       </div> 
      </div> 
      <div id="actie"> 
       <div id="nieuw"> 
        <fieldset> 
        <legend>Nieuwe turfjes</legend> 
         <label>Naam</label> 
         <select id = "naamnieuw"> 
          <option value="" selected></option> 
          <?php 
           while($r = mysql_fetch_array($names2)){ 
            echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>"); 
           } 
          ?> 
         </select> 
         <br> 
         <label>Reden</label> <input type="text" name="redennieuw" id="redennieuw"/> <br> 
         <label>Door</label> <input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br> 
         <div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div> 
        </fieldset> 
       </div> 
       <div id="verwijder"> 
        <fieldset> 
        <legend>Verwijderen turfjes</legend> 
         <label>Naam</label>      
         <select id = "naamverwijder"> 
          <option value="" selected></option> 
          <?php 
           while($r = mysql_fetch_array($names3)){ 
            echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>"); 
           } 
          ?> 
         </select> 
         <br> 
         <label>Door</label> <input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br> 
         <div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div> 
        </fieldset> 
       </div> 
       <form name="logout" method="post" action="logout.php"> 
       <div id = "buttonz"><input type="submit" name="logout" value="Log uit"></div> 
       </form> 
      </div> 
     </div> 
    </body> 
</html> 

Тест оповещение не выполняется, так что я знаю, что мои парения не работают. Я проверил, и все до того, как наведение выполнено, все же функционально.

Я не совсем уверен, что я делаю неправильно. Может ли кто-нибудь мне помочь?

Мой синтаксис, кажется, очень хорош, в соответствии с онлайн-шашками.

+1

Спасибо за размещение кода, но, возможно, вы должны поместить копию окончательного оказанной страницы в скрипку, чтобы мы могли играть с ней. –

ответ

1

кажется (не уверен, что из-за вашего кода, PHP), который вы хотите применить парить на элементы, которые отсутствуют при загрузке. Если это так, то вы не можете просто сделать

$("tr").not(':first').hover(

Вы должны использовать JQuery on так, что она будет применяться ко всем элементам, входящих.

Чтобы заменить парить Мимоза, вы должны зацепить «mousenter» и «MouseLeave» события:

$('body').on('mousenter', 'tr:not(:first)', function({ ... }); 
$('body').on('mouseleave', 'tr:not(:first)', function({ ... }); 
+0

Большое спасибо за ваш быстрый и точный ответ! – user1390504

+0

$ ("stats"). On ("mouseenter", "tr", function() { $ (this) .addClass ("selected"); \t}); . \t $ ("статистика") на ("MouseLeave", "TR", функция() { \t \t $ (это) .removeClass ("выбрано"); \t}); Это то, что у меня есть сейчас. Затем код выполняется теперь: класс не добавляется, и когда я заменяю его предупреждениями, они также не выполняются. – user1390504

2

В jQuery нет такой вещи, как addClassName, вы имели в виду addClass?

Попробуйте это:

$("tr").not(':first').hover(
    function() { 
     $(this).addClass("selected"); 
    }, 
    function() { 
     $(this).removeClass("selected"); 
    } 
); 

Кроме того, ваш селектор может быть «упрощенным» к $("tr:not:(first)")

+0

Большое спасибо за ваш быстрый и точный ответ! – user1390504