如何改變顏色在一個TR在一個表上點擊

Question

我有這樣的一個表：

<table> 
     <tr> 
      <td>A1</td> 
      <td>A2</td> 
      <td>A3</td> 
      <td>A4</td> 
     </tr> 
     <tr> 
      <td>B1</td> 
      <td>B2</td> 
      <td>B3</td> 
      <td>B4</td> 
     </tr> 
</table> 

我想知道如果我可以單擊單元格，改變顏色（帶班）：

.selected 
{ 
    background-color: green; 
} 

如果我點擊A1：

<table> 
     <tr> 
      <td class="selected">A1</td> 
      <td>A2</td> 
      <td>A3</td> 
      <td>A4</td> 
     </tr> 
     <tr> 
      <td>B1</td> 
      <td>B2</td> 
      <td>B3</td> 
      <td>B4</td> 
     </tr> 
</table> 

然後我點擊A3，它會是這樣

<table> 
     <tr> 
      <td>A1</td> 
      <td>A2</td> 
      <td class="selected">A3</td> 
      <td>A4</td> 
     </tr> 
     <tr> 
      <td>B1</td> 
      <td>B2</td> 
      <td>B3</td> 
      <td>B4</td> 
     </tr> 
</table> 

我做了什麼

<style> 
     .hover 
     { 
      background-color: red; 
     } 
     .select 
     { 
      background-color: green; 
     } 
</style> 

<script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("td").mouseover(function() 
      { 
       $(this).addClass("hover"); 
      }); 
      $("td").mouseleave(function() 
      { 
       $(this).removeClass("hover"); 
      }); 
      $("td").click(function() 
      { 
       $(this).removeClass("hover"); 
       $(this).addClass("select"); 
      }); 
     }); 
</script> 

我不知道該如何使用JQuery做。提前致謝！

Answer 1

你可以做這樣的：

$('table td').on('click', function() { 
 
    $(this).parents('table').find('td.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

.selected { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td>C1</td> 
 
    <td>C2</td> 
 
    <td>C3</td> 
 
    <td>C4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>D1</td> 
 
    <td>D2</td> 
 
    <td>D3</td> 
 
    <td>D4</td> 
 
    </tr> 
 
</table>

Answer 2

您可以使用jQuery的on()和addClass()功能，例如：

$('table').on('click', 'td', function(e) { 
 
    $(this).parents('table').find('td.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

.selected { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
     <tr> 
 
      <td>A1</td> 
 
      <td>A2</td> 
 
      <td>A3</td> 
 
      <td>A4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>B1</td> 
 
      <td>B2</td> 
 
      <td>B3</td> 
 
      <td>B4</td> 
 
     </tr> 
 
</table>

Answer 3

做到像如下： -

$('table tr td').click(function(){ 
 
    $(this).parents('table').find('td.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

.selected{ 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>A1</td> 
 
     <td class="selected">A2</td> 
 
     <td>A3</td> 
 
     <td>A4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>B1</td> 
 
     <td>B2</td> 
 
     <td>B3</td> 
 
     <td>B4</td> 
 
    </tr> 
 
</table> 
 
<br><br> 
 
<table> 
 
    <tr> 
 
     <td>A5</td> 
 
     <td class="selected">A6</td> 
 
     <td>A7</td> 
 
     <td>A8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>B5</td> 
 
     <td>B6</td> 
 
     <td>B7</td> 
 
     <td>B8</td> 
 
    </tr> 
 
</table>

Answer 4

的4行jQuery的

$('td').click(function(){ 
    $('td.selected').removeClass('selected'); 
    $(this).addClass('selected'); 

}); 

事件偵聽器添加到該行。

刪除以前的元素的類

添加類點擊的元素

$('td').click(function(){ 
 
    $('td.selected').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    
 
});

.selected{ 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    </tr> 
 
</table>

Answer 5

您可以使用jQuery。

$(document).ready(function(){ 
    $("td").click(function() { 
    $(this).parents('table').find('td.selected').removeClass('selected') 
    $(this).addClass("selected"); 
}); 
}); 

Answer 6

你也可以使用它。它將用於個人行

$('table td').click(function() { 
$(this).siblings().removeClass("selected"); 
$(this).addClass("selected"); 
});