Add jquery to joomla module

Question

Why jquery magic is not working for me?

In my module_name.php i have:

$document = JFactory::getDocument();
$document->addScriptDeclaration('
$(document).ready(function(){
    $("table tr:gt(5)").hide();
    $("#show").click(function(){
    $("table tr:gt(5)").show();
    });
   });
');

In my module tamplate default.php i have:

<table>
<tr>
<td style="width: 33px;" align="center"><strong>№</strong></td>
<td style="width: 148px;"><strong>Ник</strong></td>
<td style="width: 107px;"><strong>Рубли</strong></td>
</tr>
<?php

$position = 1;  

foreach ($top as $row) {
    echo '<tr>';
    echo '<td>' . $position . '</td>';
    echo '<td>' . $row['0'] . '</td>';
    echo '<td>' . $row['1'] . '</td>';
    echo '</tr>';
    $position ++;
 }
 ?>
 </table>
 <input id="show" type="button" value="Раскрыть">

This code has shown a table with the result of JDatabaseQuery which contains in variable $top.

In source code of my page i see link to library

<script src="/media/jui/js/jquery.min.js"></script>

and my jquery script

<script>
jQuery(window).on('load',  function() {
            new JCaption('img.caption');
        });
$(document).ready(function(){
    $("table tr:gt(5)").hide();
    $("#show").click(function(){
    $("table tr:gt(5)").show();
    });
});

window.setInterval(function(){var r;try{r=window.XMLHttpRequest?new 
XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}if(r)
{r.open("GET","/index.php?
option=com_ajax&format=json",true);r.send(null)}},3600000);
</script>

and table

<table>
<tbody>
<tr>
<td style="width: 33px;" align="center"><strong>№</strong></td>
<td style="width: 148px;"><strong>Ник</strong></td>
<td style="width: 107px;"><strong>Опыт</strong></td>
</tr>
<tr><td>1</td><td>dist</td><td>8295</td></tr>
<tr><td>2</td><td>biowolf</td><td>6142</td></tr>
<tr><td>3</td><td>arsen2005</td><td>6002</td></tr>
<tr><td>4</td><td>roman</td><td>5992</td></tr>
<tr><td>5</td><td>cyber</td><td>4305</td></tr>
<tr><td>6</td><td>mik</td><td>3935</td></tr>
<tr><td>7</td><td>artyom</td><td>3646</td></tr>
<tr><td>8</td><td>romeo</td><td>3645</td></tr>
<tr><td>9</td><td>miamivice</td><td>2896</td></tr>
<tr><td>10</td><td>kolya</td><td>2686</td></tr>
</table>

But nothing happen. Rows in table does not hide. Where am I wrong?

Answer 1

My mystake was in that there should be this syntax

$document = JFactory::getDocument();
$document->addScriptDeclaration('
    (function($){
        $(document).ready(function(){
            $("table tr:gt(5)").hide();
                $("#show").click(function(){
            $("table tr:gt(5)").show();
            });
        });
    })(jQuery);
');