Wählbar in Jquery-Tabelle mit CSS-Klasse

Question

Ich habe versucht, auswählbar für eine Tabelle, die eine CSS-Klasse zugewiesen hat. Entfernen Sie die CSS-Klasse die Auswahl funktioniert gut, aber mit zugewiesenen Klasse passiert nichts. Ich denke, es hängt mit der CSS-Definition zusammen, kann aber nicht herausfinden, wie.

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

Kann jemand mir sagen, was ich fehle?

Beispiel ist hier auch https://jsfiddle.net/tmoeller/pg9264d1/

Prost

tmoE

Answer 1

jsFiddle

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

---

Wenn Sie die gesamte TR wählbar als Gebrauch zu machen:

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

aber, als Sie Ihre CSS entsprechend ändern müssen (denn jetzt die ausgewählte Klasse in nicht mehr das TD aber die TR)

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

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

jsFiddle (selectable TR)