Assign function to row
<p>I have the following function that changes row color based on a particular selection. it works fine if there's only one row.</p>

<pre><code>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();

&lt;table&gt;
&lt;tr&gt;
    &lt;td&gt;val 1&lt;/td&gt;
    &lt;td&gt;val 2&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="mySelector"&gt;
        &lt;option value="left"&gt;red&lt;/option&gt;
        &lt;option value="right"&gt;green&lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>however, if I add more rows, they all get the same color... clearly i need to differentiate them somehow...</p>

<pre><code>&lt;table&gt;
&lt;tr&gt;
    &lt;td&gt;val 1&lt;/td&gt;
    &lt;td&gt;val 2&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="mySelector"&gt;
        &lt;option value="left"&gt;red&lt;/option&gt;
        &lt;option value="right"&gt;green&lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;val 3&lt;/td&gt;
    &lt;td&gt;val 4&lt;/td&gt;
    &lt;td&gt;
    &lt;select class="mySelector"&gt;
        &lt;option value="left"&gt;red&lt;/option&gt;
        &lt;option value="right"&gt;green&lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt; 
</code></pre>
