Question

<table>
    <tr>
       <th style="width: 15%;">Name</th>
       <th style="width: 15%;">Marks</th>
       <th>Grade</th>
    </tr>

    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select id="comboId"></select>
        </td>
    </tr>
</table>

现在我只想在更改下拉列表时更改颜色。任何人都可以通过jQuery帮助我吗

Answer 1

试试这个

<强> DEMO

$(document).ready(function(){
$( ".comboId" ).change(function() {

    //make your chnages here
  $(this).closest('tr').css('color','red');
});
});

HTML

<table>
    <tr>
       <th style="width: 15%;">Name</th>
       <th style="width: 15%;">Marks</th>
       <th>Grade</th>
    </tr>

    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select class="comboId">
                 <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
                 </select>
        </td>
    </tr>
    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select class="comboId">
                 <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
                 </select>
        </td>
    </tr>
    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select class="comboId">
                 <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
                 </select>
        </td>
    </tr>
    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select class="comboId">
                 <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
                 </select>
        </td>
    </tr>
</table>

Answer 2

你在找这样的东西吗？

$('#comboId').change(function(){
    $('#tableId).css('background-color', '#ccc');
});

Answer 3

这将有效：

$(document).ready( function() {
    $("#comboId").on("change", function() {
        $(this).parent().css("background-color", "red"); 
    });
});

请参阅fiddle。

Answer 4

试试这个

$( "#comboId" ).change(function() {
  $( "#tableId" ).css( "background-color", "red" );
});

Answer 5

您可以使用onchange功能。

http://jsfiddle.net/w7EKT/

Answer 6

为要添加此功能的所有下拉列表添加一个类。

将此事件应用于类 - comboDropdown（例如）

$("select.comboDropdown" ).change(function() {
$(this).parent().parent().css( "background-color", "YOUR COLOR" );
});

Answer 7

试试这个

$(document).ready(function(){
$( "#comboId" ).change(function() {

    $(this).closest('tr').css('background','red');
});
});

并添加选项以选择

<table>
    <tr>
       <th style="width: 15%;">Name</th>
       <th style="width: 15%;">Marks</th>
       <th>Grade</th>
    </tr>

    <tr id="tableId">
        <td  style="text-align:centre;">any value</td>
        <td  style="text-align:left;">other value</td>
        <td  style="text-align:left;">
            <select id="comboId">
                 <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
                 </select>
        </td>
    </tr>
</table>

以下是 [Demo]

当jQuery更改下拉列表时更改tr颜色

7 个答案: