Show/Hide rows with JQuery AND scrolling to anchor

Question

I have a question about toggling rows with JQuery. In fact, the toggling works, but when I click to toggle, the page always jumps to the top of the page. When I have a long list, the row is showed, but the page always jumps to the top.

Just test the code below. Save the content as a PHP file. Try to click on the +, also for the highest server numbers. You will see it always jumps back to the top of the page. Can anybody please help with this?

The 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>';
?>

Instead of echoing every single line like that, why don't you exit PHP to output it? Look at the first answer, the first section here: https://stackoverflow.com/questions/1100354/how-can-i-echo-html-in-php — Qirel, Jun 01 '17 at 09:16

score 0 · Answer 1 · answered Jun 01 '17 at 09:10

You need to prevent the default behaviour of the a tag

$(\'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 '            });';

Show/Hide rows with JQuery AND scrolling to anchor

1 Answers1