单击时如何更改表格中一个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

像下面这样：

 $('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 3

您可以使用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 4

jQuery中的4行

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

});

将事件侦听器添加到该行。

删除前一个元素的类

将类添加到clicked元素

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