可以在带有 css 类的 Jquery 表中选择

Question

我尝试在分配了 CSS 类的表上使用 selectable。删除 CSS 类选择工作正常，但分配类没有任何反应。我认为它与 CSS 定义有关，但不知道如何。

<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

Answer 1

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)