Sélectionnable dans la table Jquery avec la classe css

Question

J'ai essayé d'utiliser selectable sur une table qui a une classe CSS affectée. Suppression de la classe CSS la sélection fonctionne correctement, mais avec la classe assignée rien ne se passe. Je pense que c'est lié à la définition CSS mais je ne peux pas savoir comment.

<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' 
}); 

Quelqu'un peut-il me dire ce que je suis absent?

exemple est ici https://jsfiddle.net/tmoeller/pg9264d1/

Vive

TMOE

Answer 1

jsFiddle

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

---

Si vous voulez faire le sélectionner ensemble TR que l'utilisation:

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

mais que vous avez besoin de modifier votre CSS en conséquence (cause maintenant la classe sélectionnée dans pas plus la TD, mais le TR)

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

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

jsFiddle (selectable TR)