JQuery show hide属性不起作用或控制多行tr显示隐藏（已解决）

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()操作即可