Question

I have the following function that changes row color based on a particular selection. it works fine if there’s only one row.

function myFunc() {
    var opt = $(".mySelector").val();
    if (opt == "left") {
        $(".mySelector").closest("tr").find("td").css("background-color","red");
    } else if (opt == "right") {
        $(".mySelector").closest("tr").find("td").css("background-color","green");
    }
}
$(".mySelector").change(function(){
    myFunc();
});

myFunc();

<table>
<tr>
    <td>val 1</td>
    <td>val 2</td>
    <td>
    <select class="mySelector">
        <option value="left">red</option>
        <option value="right">green</option>
    </select>
    </td>
</tr>
</table>

however, if I add more rows, they all get the same color… clearly i need to differentiate them somehow…

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

Answer 1

Instead of using the selector again, use this.

function myFunc() {
    var opt = $(this).val();
    if (opt == "left") {
        $(this).closest("tr").find("td").css("background-color","red");
    } else if (opt == "right") {
        $(this).closest("tr").find("td").css("background-color","green");
    }
}

$(".mySelector").change(myFunc).change(); //Call change twice.  The first will add the callback and the second will trigger a change event on each .mySelector element.