选择带有id的表格单元格

Question

帮助，如果不是困难的话。我有一个选择和一张桌子。我需要显示带有特定id (或类)的表格单元格，并隐藏其余的单元格。我需要在jQuery上做这个。

<select id="sel">
  <option value = "cat1">Category1</option>
  <option value = "cat2">Category2</option>
</select>
    <table>
    <tr id="my1">
        <td>Value 1</td>
        <td>Value 1</td>
    </tr>
    <tr id="my2">
        <td>Value 2</td>
        <td>Value 2</td>
    </tr>
    <tr id="my1">
        <td>Value 1-1</td>
        <td>Value 1-1</td>
    </tr>
    <tr id="my2">
        <td>Value 2-2</td>
        <td>Value 2-2</td>
    </tr>
    <tr id="my1">
        <td>Value 2-1</td>
        <td>Value 2-1</td>
    </tr>
</table>

Answer 1

正如前面提到的注释，您的代码无效，因为id属性必须是唯一的。您可以改为类。如果更改该值，则可以根据选定的值显示行，如下所示：

​

$("#sel").change(function() {
  selected = $(this).val();
  number = selected.substr(3);
  $("tr").hide();
  $("tr[class='my" + number + "']").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option value = "cat1">Category1</option>
  <option value = "cat2">Category2</option>
</select>
    <table>
    <tr class="my1">
        <td>Value 1</td>
        <td>Value 1</td>
    </tr>
    <tr class="my2">
        <td>Value 2</td>
        <td>Value 2</td>
    </tr>
    <tr class="my1">
        <td>Value 1-1</td>
        <td>Value 1-1</td>
    </tr>
    <tr class="my2">
        <td>Value 2-2</td>
        <td>Value 2-2</td>
    </tr>
    <tr class="my1">
        <td>Value 2-1</td>
        <td>Value 2-1</td>
    </tr>
</table>

​

更新:由于有必要再次显示所有行，我在select中添加了"Select“作为新选项，并在选中"Select”时显示所有行：

​

$("#sel").change(function() {
  selected = $(this).val();
  if (selected != 0) {
    number = selected.substr(3);
    $("tr").hide();
    $("tr[class='my" + number + "']").show();
  } else {
    $("tr").show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option value="0">Select</option>
  <option value = "cat1">Category1</option>
  <option value = "cat2">Category2</option>
</select>
    <table>
    <tr class="my1">
        <td>Value 1</td>
        <td>Value 1</td>
    </tr>
    <tr class="my2">
        <td>Value 2</td>
        <td>Value 2</td>
    </tr>
    <tr class="my1">
        <td>Value 1-1</td>
        <td>Value 1-1</td>
    </tr>
    <tr class="my2">
        <td>Value 2-2</td>
        <td>Value 2-2</td>
    </tr>
    <tr class="my1">
        <td>Value 2-1</td>
        <td>Value 2-1</td>
    </tr>
</table>

​

Answer 2

$('table tr').css('display'，'none')；

$('table trid=“my1‘).css(’display‘，'block')；

Answer 3

谢谢@Rajesh！基于您的示例，我尝试编写代码。很管用，但看起来不太好。当然，@matthias_h代码要好得多。

$('select').change(function() {
        $('table tr').css('display', 'none');
        var sl = $('#sel :selected').val();
        if (sl == 'cat1') {   
            $('table tr[id="my1"]').css('display', 'block');
        } else if (sl == 'cat2') {       
            $('table tr[id="my2"]').css('display', 'block');
        } else if (sl == 'cat0') {
            $('table tr').css('display', 'block');
        }
    });