Question

我想用顶部的选择框突出显示具有匹配值的html单元格。目前，它仅突出显示该行。请给我一点帮助吗？

我要在此处执行的操作是，从选择框中选择一个数字时，具有突出显示匹配值的相应单元格。我想同时突出显示多个单元格。请注意，它们是两个不同的表。

这是我的jsfiddle。

这是html代码：

<div id="wrapper">

<table class="table1">

<tr>

<td><select name="list1" id="list1">
        <option value="">List</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
</select>   
</td>
<td><select name="list2" id="list2">
        <option value="">List</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
</select>   
</td>

<td><select name="list3" id="list3">
        <option value="">List</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
</select>   
</td>
</tr>
</table>

<table class="table2">

<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>

<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>

<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>

</table>

</div>

Css代码：

.table1,td {
    border:1px solid #999;
}

.table1 td {
    width:150px;
}


.table2,td {
    border:1px solid #999;
}

.table2 td {
    width:150px;
}

jQuery代码：

$("#list1").change(function () {

   var index = this.value - 1;

    var $rows = $('.row', '.table2');

    $rows.css('background-color', '');

    $('.row', '.table2').eq(index).css('background-color', 'yellow');
});

Answer 1

您可以通过使用.each()方法遍历所有单元格，并根据当前<select />值测试每个单元格的值匹配来实现此目的。与此类似的方法可能对您有用：

// Apply to all selectors
$("select").change(function () {

  // Extract the index of the select being interacted with
  var selectIndex = $(this).parent().index();
  
  var value = $(this).val();
	
  // Iterate each cell of the table
  $('td', '.table2').each(function() {

    // If the cell index matches the index of the corresponding
    // selected drop down then update it's background color   	
  	if($(this).index() === selectIndex) {
      
      // If a value match is found, apply background color. Other
      // wise clear the background color
      if($(this).attr('value') ==  value) {
        $(this).css('background-color', 'yellow');
      }
      else {
      	$(this).css('background-color', '');
      }
    }
    
  })
});

.table1,td {
    border:1px solid #999;
}

.table1 td {
    width:150px;
}


.table2,td {
    border:1px solid #999;
}

.table2 td {
    width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>

<div id="wrapper">

<table class="table1">

<tr>

<td>
    <select name="list1" id="list1">
        <option value="">List</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>   
</td>
<td>
    <select name="list2" id="list2">
        <option value="">List</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
    </select>   
</td>
<td>
    <select name="list3" id="list3">
        <option value="">List</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
    </select>   
</td>
</tr>
</table>

<table class="table2">

<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>

<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>

<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>

</table>

</div>

希望这会有所帮助！（here's a jsfiddle as well）

用选择框突出显示匹配的html单元格

1 个答案: