Search code examples
jquerycssselectable

Selectable in Jquery table with css class

I tried to use selectable on a table that has a CSS class assigned. Removing the CSS class the select works fine, but with assigned class nothing happens. I think it is related to the CSS definition but cannot find out how. 

<table id="sel-table" class="stats">
    <thead> 
        <tr>
            <th>ID</th>
            <th>Customer</th> 
            <th>Servername</th>
            <th>IP</th>
            <th>Port</th>
            <th>Port2</th>
            <th>GID</th>
        </tr>
    </thead>
    <tbody>               
        <tr>
            <td>1</td>
            <td>Cust1</td>
            <td>testmachine</td>
            <td>127.0.0.1</td>
            <td>11970</td>
            <td>30035</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cust2</td>
            <td>testmachine</td>
            <td>127.0.0.1</td>
            <td>11970</td>
            <td>30035</td>
            <td>2</td>
        </tr>      
    </tbody>
</table>

table.stats {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    width: 580px;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}
table.stats td {
    background-color: #CCC;
    color: #000;
    padding: 4px;
    text-align: left;
    border: 1px #fff solid;
}
table.stats td.hed {
    background-color: #666;
    color: #fff;
    padding: 4px;
    text-align: left;
    border-bottom: 2px #fff solid;
    font-size: 12px;
    font-weight: bold;
}
#sel-table  .ui-selecting { 
    background-color: #FECA40
}
#sel-table  .ui-selected { 
    background-color: #F39814; 
    color: white; 
}

$("#sel-table>tbody").selectable({
    filter: 'tr'
});

Can anybody tell me what i am missing?

Example is also here https://jsfiddle.net/tmoeller/pg9264d1/

Cheers

tmoe

Solution

  • jsFiddle

    $("#sel-table tbody tr").selectable();    // Selectable TD elements

    If you want to make the entire TR selectable than use:

    $("#sel-table tbody").selectable();       // Selectable TR elements

    but than you need to alter your CSS accordingly (cause now the selected class in not any more the TD but the TR)

     #sel-table .ui-selecting td {
   background-color: #FECA40;
 }

 #sel-table .ui-selected td {
   background-color: #F39814;
   color: white;
 }

    jsFiddle (selectable TR)