如何使用 Jquery 隐藏选项隐藏 table 行

Question

我一直在学习JQuery。下面的代码旨在根据 <select id = "changeId"> 的 <option value> 添加和更改下拉选项，这是“父级”更改功能。

我想在没有 css 的情况下隐藏 table 2。我可以使用 css 隐藏，但我想使用 jquery 的隐藏选项，因为我读过我可以像这样隐藏任何 table 行。 $('.tableClass tr[id="tablerow_2"]').hide();

如何在不使用任何 css 的情况下仅使用 Jquery 来获得下面的 fiddle 到 work/hide？基本上我想从隐藏苹果开始，然后继续隐藏所有三个。

Fiddle: https://jsfiddle.net/wj_fiddle_playground/57rzfm9o/6/

Javascript

<script>
$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        <!--$('.exampleCSS').hide();-->
   
        //not working
        //$('#tablerow_2').hide();

        //not working
        //$('.tableClass tr[id="tablerow_2"]').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});
</script>

HTML

<table class = "tableClass">
  <tr id = "tablerow_1">
    <select id = "changeId">
    <option value="">-- Please Select --</option>
    <option value="appleValue">Apple</option>
    <option value="bananaValue">Banana</option>  
    <option value="orangeValue">Orange</option>  
    </select>
  </tr>

  <tr id = "tablerow_2">
    <select id = "appleValue" <!--class="exampleCSS"-->>
    <option value="1">Red Delicious</option>
    <option value="2">Granny Smith</option>  
    </select>
  </tr>

  <tr id="tablerow_3">
    <select id = "bananaValue">
    <option value="1">Plantain</option>
    <option value="2">Dancing Banana</option>
    </select>
  </tr>

  <tr id = "tablerow_4">
    <select id = "orangeValue" >
    <option>Blood</option>
    <option>Navel</option>
    <option>Florida</option>
    </select>
  </tr>
</table>

Answer 1

基本上我想从隐藏苹果开始，然后继续隐藏所有三个。

我在这里的建议是使用类而不是使用 id 隐藏所有而不是一个一个地选择 id 会容易得多。这就是为什么你的代码没有按预期工作的原因，因为 table > tr > td 您忘记添加 <td></td> 并且一切正常

我的建议是你

$(document).ready(function(){
$("#changeId").change(function(){
  var optionValue = $(this).val();

        //css Works
        //$('.exampleCSS').hide();
   
        //works
        $('#tablerow_2').hide();

        //works
        $('.tableClass tr#tablerow_2').hide();

   if(optionValue){
    $(`#${optionValue}`).show();
   }
}).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableClass">
  <tr id = "tablerow_1">
    <td>
      <select id = "changeId">
        <option value="">-- Please Select --</option>
        <option value="appleValue">Apple</option>
        <option value="bananaValue">Banana</option>  
        <option value="orangeValue">Orange</option>  
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_2">
    <td>
      <select id = "appleValue" >
       <option value="1">Red Delicious</option>
      <option value="2">Granny Smith</option>   
      </select>
    </td>
  </tr>
  
  <tr id="tablerow_3">
    <td>
      <select id = "bananaValue">
        <option value="1">Plantain</option>
        <option value="2">Dancing Banana</option>
      </select>
    </td>
  </tr>
  
  <tr id = "tablerow_4">
    <td>
      <select id="orangeValue" >
        <option>Blood</option>
        <option>Navel</option>
        <option>Florida</option>
      </select>
    </td>
  </tr>
</table>

如何使用 Jquery 隐藏选项隐藏 table 行

How to hide table row using Jquery hide option

html

javascript

jquery

jquery-ui

hide