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