如何使用 Jquery 隐藏选项隐藏表格行答案

【问题标题】：How to hide table row using Jquery hide option如何使用 Jquery 隐藏选项隐藏表格行
【发布时间】：2021-01-10 23:55:55
【问题描述】：

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

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

如何在不使用任何仅使用 css 的 Jquery 的情况下让下面的小提琴工作/隐藏？基本上我想从隐藏苹果开始，然后继续隐藏所有三个。

小提琴：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>

【问题讨论】：

标签： javascript html jquery jquery-ui hide

【解决方案1】：

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

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

我给你的建议

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

【讨论】：