2017-06-01 18 views
0

JQueryで行を切り替えることについて質問があります。実際、トグルは機能しますが、クリックするとページがページの先頭にジャンプします。長いリストがあると行が表示されますが、ページは常に先頭にジャンプします。JQueryで行を表示/非表示にしてアンカーにスクロール

以下のコードをテストしてください。コンテンツをPHPファイルとして保存します。最高のサーバー番号については+をクリックしてください。あなたはそれが常にページの先頭にジャンプするのを見るでしょう。誰でもこれを手伝ってもらえますか?

コード:

<?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>'; 
?> 
+0

のデフォルトの動作を阻止する必要があり、なぜあなたはにPHPを終了していませんそれを出力する?最初の回答、ここの最初のセクションを見てください:https://stackoverflow.com/questions/1100354/how-can-i-echo-html-in-php – Qirel

答えて

0

あなたが代わりにそのようなすべての単一の行をエコーの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 '   });'; 
+0

はい!ありがとう!これは動作します! –

関連する問題