Question

如果我有一个带有下拉选项的选择器，如何在更改时更改此行中所有单元格的颜色？

function changeColor(){

}

$(".mySelector").change(function() {
    changeColor();
});

<table>
<tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>
    <select class="mySelector">
        <option value="red">red</option>
        <option value="grn">green</option>
        <option value="blu">blue</option>
    </select>
    </td>
</tr>
<tr>
    <td>val 3</td>
    <td>val 4</td>
    <td>
    <select class="mySelector">
        <option value="red">red</option>
        <option value="grn">green</option>
        <option value="blu">blue</option>
    </select>
    </td>
</tr>
</table>

Answer 1

您可以使用closest()获取<tr>元素的最近<select>个祖先：

$(".mySelector").change(function() {
    $(this).closest("tr").css("background-color",
        $("option:selected", this).text());
});

Answer 2

您应该将选项值更改为有效颜色而不是缩写，然后您可以执行此操作：

    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>

JS：

$(".mySelector").change(function() {
    $(this).closest("tr").css("background-color", this.value);
});

JSFiddle：http://jsfiddle.net/A2FFT/

如果您想确保在初始化时设置颜色，可以将另一个change调用链接到它。：

$(".mySelector").change(function() {
    $(this).closest("tr").css("background-color", this.value);
}).change(); //Set background color without needing to change the selected option.

使用/ jQuery在select上的行上应用颜色

2 个答案: