Question

I’m trying to show hide table rows by assigning a number id to the class attribute of the tr element

I have it coded so that the first instance of this number id is shown while the rest are hidden. Clicking the first instance should reveal the rest of the rows with the same id.

This is the code I have so far, however it fails to reveal the rest of the rows:

The following code is in the document.ready function

var ids = ["1","2","3","4","5","6","7","8","9","10"];

        var i;

        for (i = 0; i < ids.length; i++) {


             $("." + ids[i]).hide()

             $("." + ids[i] + ":first").show()

             $("." + ids[i] + ":first").click(function () {

                if( $("." + ids[i] + ":last").css('display') == 'none') {

                    $("." + ids[i]).show()

                } else {

                     $("." + ids[i]).hide()

                     $("." + ids[i] + ":first").show()

                }

            });


        }

The html is just

<tr class="<%= @current_id %>">
<td>test data</td>
<td>test data</td>
</tr>

Answer 1

you have many errors:

$("." + ids[i] + ":first")
to
$("." + ids[i]).first()

then

if( $("." + ids[i] + ":last").css('display') == 'none')

to 

if( $("." + ids[i]).last().is(':visible'))

then close all methods with ";" :

$("." + ids[i]).show()

to

$("." + ids[i]).show();

also the class .1 or .2 etc .. are not valid you should replace that with .1-row

then , actually you are selecting all the tr but not the td elements, you should do somenthing like:

$("."+ids[i]).children('td').first().....ect /*this select the first td of the tr*/