JQuery show hide屬性不起作用或控制多行tr顯示隱藏（已解決）
阿新 • • 發佈：2019-01-23
1.表單中你可能要控制多行tr td 顯示或者隱藏，但是在每個tr上面加id屬性又顯得很笨，其他table什麼的並沒什麼用那麼關鍵的解決辦法來了，你只需要一個<tbody></tbody>。
<tbody id="sl"> <tr> <td style="width:70px;text-align: right;padding-top: 13px;">稅率:</td> <td><input type="text" name="SOD_CESS" id="SOD_CESS" value="${pd.SOD_CESS}" maxlength="32" placeholder="請輸入稅率" title="稅率" readonly="readonly"/></td> </tr> <tr> <td style="width:70px;text-align: right;padding-top: 13px;">稅額:</td> <td><input type="text" name="SOD_SUMCESS" id="SOD_SUMCESS" value="${pd.SOD_SUMCESS}" maxlength="32" placeholder="這裡輸入稅額" title="稅額"/></td> </tr> <tr> <td style="width:70px;text-align: right;padding-top: 13px;">含稅金額:</td> <td><input type="text" name="SOD_SUMPRICE" id="SOD_SUMPRICE" value="${pd.SOD_SUMPRICE}" maxlength="32" title="含稅金額" readonly="readonly"/></td> </tr> </tbody>
$("#sl").hide();
$("#sl").show();2.表格中有radio選項，點選不同的radio選項會顯示對應的表單選項,對radio加change監聽事件，根據不同選中的值將對應表單選項show()展示出來。
<tr> <td style="width:90px;text-align: right;padding-top: 13px;">交易型別:</td> <td colspan="3"> <input name="PEO_ACCOUNTTYPE" ID="PUBLIC_ACCOUNT" type="radio" class="ace" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> checked</c:if> value="0" /> <span class="lbl"> 公賬</span> <input name="PEO_ACCOUNTTYPE" ID="PRIVATE_ACCOUNT" type="radio" class="ace" <c:if test="${pd.PEO_ACCOUNTTYPE==1 }"> checked</c:if> value="1" /> <span class="lbl"> 私賬</span> </td> </tr> <tr id="ZERO" <c:if test="${pd.PEO_ACCOUNTTYPE==1 }">style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">公司賬號:</td> <td><input type="text" name="PEO_BANKACCOUNTS" id="PEO_BANKACCOUNTS" value="${pd.PEO_BANKACCOUNTS}" maxlength="32" placeholder="公司銀行賬號" title="公司銀行賬號"/></td> <td style="width:90px;text-align: right;padding-top: 13px;">備註:</td> <td><input type="text" name="PEO_REMARK" id="PEO_REMARK" value="${pd.PEO_REMARK}" maxlength="32" placeholder="這裡輸入備註" title="備註"/></td> </tr> <tr id="ONE" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">開戶人1:</td> <td><input type="text" name="PEO_OPENPRIVATEBANKACCOUNTONE" id="PEO_OPENPRIVATEBANKACCOUNTONE" value="${pd.PEO_OPENPRIVATEBANKACCOUNTONE}" maxlength="32" placeholder="開戶人1" title="開戶人1"/></td> <td style="width:90px;text-align: right;padding-top: 13px;">私人銀行賬號1:</td> <td><input type="text" name="PEO_PRIVATEBANKACCOUNTONE" id="PEO_PRIVATEBANKACCOUNTONE" value="${pd.PEO_PRIVATEBANKACCOUNTONE}" maxlength="32" placeholder="私人銀行賬號1" title="私人銀行賬號1"/></td> </tr> <tr id="ONE0" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">收款人1:</td> <td><input type="text" name="PEO_PAYEEONE" id="PEO_PAYEEONE" value="${pd.PEO_PAYEEONE}" maxlength="32" placeholder="收款人1" title="收款人1"/></td> </tr> <tr id="TWO" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">開戶人2:</td> <td><input type="text" name="PEO_OPENPRIVATEBANKACCOUNTTWO" id="PEO_OPENPRIVATEBANKACCOUNTTWO" value="${pd.PEO_OPENPRIVATEBANKACCOUNTTWO}" maxlength="32" placeholder="開戶人2" title="開戶人2"/></td> <td style="width:90px;text-align: right;padding-top: 13px;">私人銀行賬號2:</td> <td><input type="text" name="PEO_PRIVATEBANKACCOUNTTWO" id="PEO_PRIVATEBANKACCOUNTTWO" value="${pd.PEO_PRIVATEBANKACCOUNTTWO}" maxlength="32" placeholder="私人銀行賬號2" title="私人銀行賬號2"/></td> </tr> <tr id="TWO0" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">收款人2:</td> <td><input type="text" name="PEO_PAYEETWO" id="PEO_PAYEETWO" value="${pd.PEO_PAYEETWO}" maxlength="32" placeholder="收款人2" title="收款人2"/></td> </tr> <tr id="THREE" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">開戶人3:</td> <td><input type="text" name="PEO_OPENPRIVATEBANKACCOUNTTHREE" id="PEO_OPENPRIVATEBANKACCOUNTTHREE" value="${pd.PEO_OPENPRIVATEBANKACCOUNTTHREE}" maxlength="32" placeholder="開戶人3" title="開戶人3"/></td> <td style="width:90px;text-align: right;padding-top: 13px;">私人銀行賬號3:</td> <td><input type="text" name="PEO_PRIVATEBANKACCOUNTTHREE" id="PEO_PRIVATEBANKACCOUNTTHREE" value="${pd.PEO_PRIVATEBANKACCOUNTTHREE}" maxlength="32" placeholder="私人銀行賬號3" title="私人銀行賬號3"/></td> </tr> <tr id="THREE0" <c:if test="${pd.PEO_ACCOUNTTYPE == null or pd.PEO_ACCOUNTTYPE==0 }"> style="display: none"</c:if>> <td style="width:90px;text-align: right;padding-top: 13px;">收款人3:</td> <td><input type="text" name="PEO_PAYEETHREE" id="PEO_PAYEETHREE" value="${pd.PEO_PAYEETHREE}" maxlength="32" placeholder="收款人3" title="收款人3"/></td> </tr>
$('input[type=radio][name=PEO_ACCOUNTTYPE]').change(function() { if (this.value == '0') { $("#ONE0").hide(); $("#ONE").hide(); $("#TWO0").hide(); $("#TWO").hide(); $("#THREE0").hide(); $("#THREE").hide(); $("#ZERO").show(); }else if (this.value == '1') { $("#ONE0").show(); $("#ONE").show(); $("#TWO0").show(); $("#TWO").show(); $("#THREE0").show(); $("#THREE").show(); $("#ZERO").hide(); } });
效果圖：
3.jquery的show和hide只針對本身有效，對於div中有tr,td標籤的，是不起作用的所以要去掉div
直接在tr上進行show()和hide()操作即可