可選擇在CSS類的Jquery表

我試圖在一個CSS類指定的表上使用selectable。刪除CSS類選擇工作正常，但與分配的類沒有任何反應。我認爲它與CSS定義有關，但無法知道如何。可選擇在CSS類的Jquery表

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

誰能告訴我，我缺少的是什麼？

實施例也在這裏https://jsfiddle.net/tmoeller/pg9264d1/

乾杯

tmoe

來源

2016-04-25 tmoe

您發佈的的jsfiddle有沒有包括'selectable'庫。 – rmondesilva

無論出於何種原因，jsfiddle沒有保存設置。但它也不起作用jquery-ui庫啓用 – tmoe

現在在jsfiddle糾正。 – tmoe

jsFiddle

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

如果你想使整個TR可選擇不是使用：

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

但比需要相應地改變你的CSS（因爲現在所選擇的類中沒有任何更多的TD，但TR）

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

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

jsFiddle (selectable TR)

來源

2016-04-25 08:53:18

謝謝你的回答。是否可以選擇完整的行？ – tmoe

太好了，那正是我在找的東西。感謝您的協助！ – tmoe

@tmoe不客氣 –

可選擇在CSS類的Jquery表

回答

相關問題