Afficher/Masquer les lignes avec JQuery ET faire défiler pour ancrer

J'ai une question sur le basculement des lignes avec JQuery. En fait, le basculement fonctionne, mais lorsque je clique pour basculer, la page saute toujours en haut de la page. Quand j'ai une longue liste, la ligne est montrée, mais la page saute toujours vers le haut.Afficher/Masquer les lignes avec JQuery ET faire défiler pour ancrer

Testez simplement le code ci-dessous. Enregistrez le contenu en tant que fichier PHP. Essayez de cliquer sur le +, également pour les numéros de serveur les plus élevés. Vous verrez qu'il revient toujours en haut de la page. Quelqu'un peut-il aider s'il vous plaît avec ça?

Le code:

<?php 
// 
// https://stackoverflow.com/questions/20529050/jquery-trying-to-show-hide-table-rows (Jquery: Trying to Show/Hide Table Rows) 
// 

/////////////////////////////////////////////////////// 
// HTML begin opbouwen        // 
/////////////////////////////////////////////////////// 
echo '<!DOCTYPE html>'; 
echo '<html>'; 
echo '<head>'; 
echo '<style>'; 
echo ' .child'; 
echo '  {'; 
echo '   background-color: #d9d9d9;'; 
echo '  }'; 
echo ' table.greybg'; 
echo '  {'; 
echo '   background-color: #f2f2f2;'; 
echo '  }'; 
echo ' th.whiteboldlarge'; 
echo '  {'; 
echo '   color: white;'; 
echo '   font-weight: bold;'; 
echo '   font-size: 110%;'; 
echo '  }'; 
echo ' th.whiteboldnormal'; 
echo '  {'; 
echo '   color: white;'; 
echo '   font-weight: bold;'; 
echo '  }'; 
echo ' td'; 
echo '  {'; 
echo '   border-style: solid;'; 
echo '   border-width: 0px;'; 
echo '   border-color: white;'; 
echo '  }'; 
echo ' td.whitebold'; 
echo '  {'; 
echo '   color: white;'; 
echo '   font-weight: bold;'; 
echo '  }'; 
echo '</style>'; 
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>'; 
echo '<script>'; 
echo '$(function ($)'; 
echo ' {'; 
echo '  $(\'tr.parent td\')'; 
echo '   .on("click", "span.btn a", function()'; 
echo '   {'; 
echo '    var id = $(this).data(\'id\');'; 
echo '    console.log(id);'; 
echo '    $("#child-" + id).toggle();'; 
echo '   });'; 
echo ' });'; 
echo '</script>'; 
echo '</head>'; 
echo '<body>'; 

/////////////////////////////////////////////////////// 
// Alles mooi in een tabel weergeven     // 
/////////////////////////////////////////////////////// 
// Header 
echo '<table border="0" cellpadding="4" class="greybg">'; 
echo '<thead bgcolor="#737373">'; 
echo '<tr>'; 
echo '<th></th>'; 
echo '<th class="whiteboldlarge">Name</th>'; 
echo '<th class="whiteboldlarge">Description</th>'; 
echo '</tr>'; 
echo '</thead>'; 
// Body 
echo '<tbody>'; 
$catprev = ""; 
for ($i=1; $i<=100; $i++) 
{ 
    echo '<tr class="parent">'; 
    echo '<td valign="top" align="center" width="10"><span class="btn"><a data-id="'.$i.'" href="#">+</a></span></td>'; 
    /// Servernaam 
    echo '<td valign="top" nowrap>Server '.$i.'</td>'; 
    /// Description 
    echo '<td valign="top" nowrap>Description '.$i.'</td>'; 
    echo '</tr>'; 
    // Extra info (verborgen, openvouwen door op + te klikken) 
    echo '<tr class="child" id="child-'.$i.'" style="display:none;">'; 
    echo ' <td colspan="3">'; 
    echo ' <table border="0" cellpadding="4" width="100%">'; 
    echo '  <tr>'; 
    echo '  <td colspan="3" align="center" bgcolor="#737373"><b><font color="white">Details voor '.$serverlist[$i][0].'</font><b></td>'; 
    echo '  </tr>'; 
    echo '  <tr>'; 
    echo '  <td>&nbsp;</td>'; 
    echo '  <td><b>Info</b></td>'; 
    echo '  <td>More info '.$i.'</td>'; 
    echo '  </tr>'; 
    echo ' </table>'; 
    echo ' </td>'; 
    echo '</tr>'; 
} 
echo '</tbody>'; 
echo '</table>'; 

/////////////////////////////////////////////////////// 
// HTML einde opbouwen        // 
/////////////////////////////////////////////////////// 
echo '</body>'; 
echo '</html>'; 
?>

Source

2017-06-01 Raf van de Vreugde

Au lieu de faire écho à chaque ligne comme ça, pourquoi quittez ne pas PHP le sortir? Regardez la première réponse, la première section ici: https://stackoverflow.com/questions/1100354/how-can-i-echo-html-in-php – Qirel

Vous devez éviter le comportement par défaut de la balise a

$(\'tr.parent td\')'; 
echo '   .on("click", "span.btn a", function (e)'; 
echo '   { e.preventDefault();'; 
echo '    var id = $(this).data(\'id\');'; 
echo '    console.log(id);'; 
echo '    $("#child-" + id).toggle();'; 
echo '   });';

Source

2017-06-01 09:10:21

OUI! Merci! Cela marche! –

Afficher/Masquer les lignes avec JQuery ET faire défiler pour ancrer

Répondre

Questions connexes