如何用jQuery隱藏HTML表格？

-2

我的代碼需要基於另一個字段輸入來顯示/隱藏整個表格，但由於某種原因，它不起作用。這種代碼可以正常使用div元素。與桌子有什麼不同？如何用jQuery隱藏HTML表格？

$(function() { 
 
    $('#DD').change(function() { 
 
    if ($(this).val() == "Yes") { 
 
     $('#hiddenTable').show(); 
 
    } else { 
 
     $('#hiddenTable').hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="DD" id="DDid" class="DDclass"> 
 
    <div style="padding-bottom:2%; font-family: 'Josefin Sans', sans-serif;font-size: 100%;"> 
 
    Have you contacted or been contacted by our customer service team?<br> 
 
    <select name="DD2" id="DDid2" class="DDclass2"> 
 
     <option value="No" >No</option> 
 
     <option value="Yes" >Yes</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<table class="hiddenTable" id="hiddenTable" style="display:none;"> 
 
    <tr> 
 
    <th></th> 
 
    <th>Strongly Agree</th> 
 
    <th>Somewhat Agree</th> 
 
    <th>Neither Agree nor Disagree</th> 
 
    <th>Somewhat Disagree</th> 
 
    <th>Strongly Disagree</th> 
 
    <th>Not Applicable</th> 
 
    </tr> 
 
    <tr> 
 
    <td>I received answer(s) quickly</td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Strongly Agree" data-col="1"></td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Somewhat Agree" data-col="2"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Neither Agree nor Disagree" data-col="3"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Somewhat Disagree" data-col="4"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Strongly Disagree" data-col="5"></td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Not Applicable" data-col="6"></td> 
 
    </tr> 
 
</table>

來源

2017-08-07 Atheri

是你得到一個錯誤？將您的JavaScript放在頁面的底部。或者嘗試$（選擇器）.on（'click'，function（）{// code here}）; – Gezzasa

將'＃DD'更改爲'＃DDid2' –

所有'jQuery＃hide'確實會將'display：none'添加到元素，並帶有一些奇特的緩存。「Equivelant to calling'jQuery＃css ..」http://api.jquery.com/hide/ – Crowes

使用此代碼：

您需要更改ID $('#DD').change(function(){到$('#DDid2').change(function(){

$(function() { 
 
    $('#DDid2').change(function(){ 
 
     if ($(this).val() == "Yes") 
 
     { 
 
      $('#hiddenTable').show(); 
 
     } else { 
 
      $('#hiddenTable').hide(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="DD" id="DDid" class="DDclass"> 
 
     <div style="padding-bottom:2%; font-family: 'Josefin Sans', sans-serif;font-size: 100%;"> 
 
     Have you contacted or been contacted by our customer service team? 
 
     <br> 
 
     <select name="DD2" id="DDid2" class="DDclass2"> 
 
     <option value="No" >No</option> 
 
     <option value="Yes" >Yes</option> 
 
    </select> 
 
     </div> 
 
    </div> 
 

 

 
<table class="hiddenTable" id="hiddenTable" style="display:none;"> 
 
<tr> 
 
    <th></th> 
 
    <th>Strongly Agree</th> 
 
    <th>Somewhat Agree</th> 
 
    <th>Neither Agree nor Disagree</th> 
 
    <th>Somewhat Disagree</th> 
 
    <th>Strongly Disagree</th> 
 
    <th>Not Applicable</th> 
 
</tr> 
 
<tr> 
 
    <td>I received answer(s) quickly</td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Strongly Agree" data-col="1"></td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Somewhat Agree" data-col="2"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Neither Agree nor Disagree" data-col="3"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Somewhat Disagree" data-col="4"></td> 
 
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Strongly Disagree" data-col="5"></td> 
 
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Not Applicable" data-col="6"></td> 
 
</tr> 
 
</table>

來源

2017-08-07 07:00:39

謝謝，不敢相信我錯過了這個明顯的東西。這工作。 – Atheri

你不能有兩個ID到一個元素'id =「DD」id =「DDid」'這是不正確的。 –

回答「o型」問題的意義不大 –

如何用jQuery隱藏HTML表格？

回答

相關問題