在HTML表格中選擇和取消選擇td

我在我的網站上有一個表格，我希望能夠選擇一個單元格和背景顏色的變化，然後選擇另一個單元格（不在同一行）並將第一個單元格返回到默認顏色，而新選擇的單元格更改背景顏色。我環顧四周，似乎只能找到我已經擁有的東西或一堆複選框。我有一個小提琴here。在HTML表格中選擇和取消選擇td

這裏是我的CSS：

.selected { 
    background-color: rgba(0,0,0,0.4) !important; 
    color: #fff; 
}

這裏是我的jQuery：

<script type='text/javascript'>//<![CDATA[ 
    $("#table2 td").click(function() 
    { 
     $(this).toggleClass('selected').siblings().removeClass('selected'); 
    }); 
    //]]> 
</script> 

<script type='text/javascript'>//<![CDATA[ 
    $("#table tr").click(function() 
    { 
     $(this).toggleClass('selected').siblings().removeClass('selected'); 
    }); 
    //]]> 
</script>

這裏是我的HTML：

<body> 

<table id='table'> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>Second Row</td> 
    <td>Still Second Row</td> 
    </tr> 
</table> 
<br><br> 
<table id='table2'> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tbody> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
    <tr> 
    <td>Second Row</td> 
    <td>Still Second Row</td> 
    </tr> 
    </tbody> 
</table> 
</body>

我可以得到table做工精細選擇和取消選擇的行，但table2無法正常工作。我在一行中選擇一個單元格，然後在同一行中選擇一個單元格並且它可以工作，但是如果我在另一行中選擇一個單元格，它不會將第一個單元格更改回默認顏色。上面的小提琴顯示了正在發生的事情。

我試着添加一個<tbody>，但我認爲我沒有做到正確，因爲結果沒有改變。

我試着加入$('.selected').removeClass('selected');，它部分工作。我可以在一行中選擇一個單元格，然後在另一行中選擇一個單元格，並且背景顏色會正確更改，但如果我第二次選擇第一個單元格，則不會取消選擇。

來源

2016-07-28 Mike

您選擇的兄弟姐妹的td的方式是錯誤的，試試這個

$("#table2 tbody td").click(function() 
{ 
    $(this).closest('table').find('td').not(this).removeClass('selected'); 
    $(this).toggleClass('selected'); 
});

Fiddle

來源

2016-07-28 18:14:17 ssilas777

這樣做！我知道我沒有做正確的事。我從昨天開始一直在使用jquery。 – Mike

你可以用你的標題行中<thead></thead>標籤和<tbody></tbody>標籤身體行，然後使用：

$("#table tbody tr, #table2 tbody tr").click(function() { 
    $(this).siblings().removeClass('selected').end().addBack().toggleClass('selected'); 
});

jsFiddle example

來源

2016-07-28 17:58:38 j08691

這只是改變行，我想能夠改變第二個表格中的單元格。 – Mike

由於您正在調用.sibling（）方法，但希望它更改不是兄弟的元素，所以它在table2中的表現並不像您想要的那樣。運輸署在此行中：

<tr> 
    <td>January</td> 
    <td>$100</td> 
</tr>

不在此行中的那些兄弟姐妹：

<tr> 
    <td>Second Row</td> 
    <td>Still Second Row</td> 
</tr>

調整點擊事件中您的代碼是這樣的：

$(this).closest('table').find('td').not(this).removeClass('selected');

來源

2016-07-28 18:16:26 Cruiser

我不明白這部分內容。我以爲他們是''，因爲他們是兄弟姐妹。謝謝你的解釋！ – Mike

在HTML表格中選擇和取消選擇td

回答

相關問題