Question

I have some html table as

<div>
    <table id="tbl1" class="tblcls">
    <tr><td>
    </table>

    <table id="x">
    <tr><td>
    </table>

    <table id="tbl3">
    <tr><td>
    </table>
</div>

I am applying the below multi-selectors to set the background color of those tables whose id starts with “tbl” and has a class “tblcls”

 $(document).ready(function () 
{           
            var $table = $("table.tblcls,[id^=tbl]");            
            $table.css("background-color", "yellow");
});

But it is selecting both table with ids tbl1,tbl3 where as the expected output will be only the first table (id=tbl1).

What is the mistake i am doing and how to solve it?

Thanks

Answer 1

The class and the attribute should both be on the table:

$("table[id^='tbl'].tblcls");

Fiddle: http://jsfiddle.net/jonathansampson/sf2zP/