Jquery:更改选择选项时将颜色更改为表格行，不适用于多个表格行

Jquery: change colour to table row when select option is changed not working multiple table rows?

本文关键字：表格 不适用 适用于 颜色 选择 选项 Jquery      更新时间：2023-09-26

对，我有一张桌子，有两行。在右侧单元格中，我有一个带有值(1、2 和 3(的下拉菜单。

根据选择的 with 我希望表格行更改特定颜色。当我有一个表行时，我已经设法让它工作，并且在值之间切换它工作正常。但是，当我复制代码以制作多行时，它会停止工作。

对于多行，如果我单击第一行

的值 2，它也会将第一行更改为正确的颜色，然后如果我更改第 5 行的值，无论我选择什么值，它都会更改为我更改的第一行的颜色。如果这是有道理的。

这是代码...

-

.CSS

<style>
table td,th{ 
    border:1px solid black; 
    padding-left:100px; 
}

table tr{ 
    background-color:red;
} 
.online{ 
    background-color:green;
}
.offline{ 
    background-color:red;
}
.paused{ 
    background-color:orange;
}
</style>

-

.HTML

<body>
<table id="table">
<tr style="background-color:grey;">
    <th>
    Hello
    </th>
    <th>
    Is it
    </th>
</tr>   
<tr class="options">
    <td>
    yayaya
    </td>
    <td>
    <select id="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    </td>
</tr>

<tr class="options">
    <td>
    yayaya
    </td>
    <td>
    <select id="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    </td>
</tr>
</table>
</body>

-

简讯

<script>
$('select').change(function(){ 
    if($('select').val() == "2"){ 
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
        $(this).parents('.options').addClass('online'); 
    }else if($('select').val() == "1"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('offline'); 
    }else if($('select').val() == "3"){
                $(this).parents('.options').removeClass('online');
                $(this).parents('.options').removeClass('offline');
                $(this).parents('.options').removeClass('paused');
         $(this).parents('.options').addClass('paused'); 
    }
});
</script>

这是在JSFIDDLE上，这样你就可以明白我的意思。

http://jsfiddle.net/n3nFB/1923/

尝试使用一行，然后复制并粘贴下面的同一行

将所有$('select').val()更改为this.value，以便您始终使用已更改的那个，而不是第一个。

http://jsfiddle.net/gaby/n3nFB/1924/演示

此外，您可以通过一次调用删除多个类，并且可以链接以下addClass

例如 

$(this).parents('.options')
       .removeClass('online offline paused')
       .addClass('online');

http://jsfiddle.net/gaby/n3nFB/1925/演示

相关文章：