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

Question

我的網站中有一個表格，我希望能夠選擇一個單元格並更改背景顏色，然后選擇另一個單元格（不在同一行中）並使第一個單元格返回默認顏色，而新選擇的單元格改變背景顏色。 我環顧四周，似乎只能找到我已經擁有的東西或關於一堆復選框的東西。 我這里有一個小提琴。

這是我的 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'); 它部分起作用了。 我可以在一行中選擇一個單元格，然后在另一行中選擇一個單元格，背景顏色會正確更改，但是如果我第二次選擇第一個單元格，它不會取消選擇。

Answer 1

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

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

小提琴

Answer 2

它在 table2 中沒有按照您想要的方式執行，因為您正在調用 .sibling() 方法，但期望它更改不是兄弟的元素。 td 在這一行：

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

Answer 3

您可以將標題行包裹在<thead></thead>標簽中，將正文行包裹在<tbody></tbody>標簽中，然后使用：

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

jsFiddle 示例

Answer 4

為所選單元格的樣式創建一個 css 樣式。

然后為每種情況切換該樣式（單擊/未單擊）並從其余單元格中刪除“選定”類。

CSS

.selected {
    color: rgb(252, 69, 69);
}

在 Jquery 中選擇單元格時...

$(function(){
  $('body').on('click','table tr',function(e){
    e.preventDefault();

    $(this).toggleClass('selected').siblings().removeClass('selected');

  });
});

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

問題描述

4 個解決方案

解決方案1
2 已采納 2016-07-28 18:14:17

解決方案2
1 2016-07-28 18:16:26

解決方案3
0 2016-07-28 17:58:38

解決方案4
0 2021-05-26 18:36:10

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

問題描述

4 個解決方案

解決方案1 2 已采納 2016-07-28 18:14:17

解決方案2 1 2016-07-28 18:16:26

解決方案3 0 2016-07-28 17:58:38

解決方案4 0 2021-05-26 18:36:10

解決方案1
2 已采納 2016-07-28 18:14:17

解決方案2
1 2016-07-28 18:16:26

解決方案3
0 2016-07-28 17:58:38

解決方案4
0 2021-05-26 18:36:10