More than one class breaks jquery selector?

Question

Hi, I'm working on a table where all rows have at least one class. Some rows have two classes and others have a class and an id.

I have a simple bit a jquery to hide and show rows onclick, however when all the attributes are set, nothing happens.

If I remove the additional attributes, so that only those in the jquery script are used, it all works as planned, but does not look correct as the style is no longer applied.

Does anyone know what's going on here?

This is the jquery

`$("td.toggleguest").click(function(){  
        var delegaterow = $(this).parent().attr('id'); 
        var rowspl = delegaterow.split('_');
        var rownum = rowspl[1];
        $('tr.subrow_'+rownum).toggle();
       });

`

Sample HTML Markup copied from source code:

<tr id="delegaterow_7" class="light_row"> 
<td class="toggleguest">Some Content</td> 
<td>Some Content</td> 
<td>Some Content</td> 
<td>Some Content</td> 
<td>Some Content</td> 
<td>Some Content</td> 
<td>Some Content</td> 
</tr>
<tr class="light_row" class="subrow_7">      
<td colspan="6">Some Content</td> 
<td>Some Content</td>
</tr>

The table has rows for people (each with an id of row_X), with some rows having guests. The guest rows are given the class name 'subrow_X' where X matches the ID of the parent row.

I would prefer not to do this with tables, but it is out of my control.

Any advice would be greatly appreciated.

Thanks.

Answer 1

The HTML syntax you're using is not correct:

<tr class="light_row" class="subrow_7">

It is not allowed to have more than one of the same attribute. Therefore combine the class attribute in one attribute like this:

<tr class="light_row subrow_7">

jQuery should be working now.