Выберите ячейки таблицы с идентификатором

Question

Помогите, если не сложно. У меня есть выбор и таблица. Мне нужно показать ячейки таблицы с указанным c идентификатором (или классом) и скрыть остальные ячейки. Мне нужно сделать это на 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>

Обновление: поскольку необходимо снова отобразить все строки, я добавляю «Выбрать» в качестве новой опции для выбора и отображаю все строки, когда выбран «Выбор» :

$("#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

Спасибо @ Радже sh! Основываясь на вашем примере, я попытался написать код. Это работает, но выглядит не очень хорошо. Конечно, код @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');
        }
    });

Answer 3

$ ('table tr'). css ('display', 'none');

$ ('table tr [id = "my1"]'). css (' дисплей», 'блок');