javascript - 如何根据子表样式可见性隐藏父表

Question

我有一个如下的html，基本上它包含类为<table class="customFormTable block"的主表这又包含一些表，如 <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">

所以我希望 jQuery/javascript 扫描具有类 table customFormTable 的父表并查找是否有任何 child 有带有 style="visibility: hidden;" 的 table ，如果是这样，则隐藏父表，即 table customFormTable

<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">

                <tbody><tr>
                    <td>&nbsp;</td>
                </tr>

                <tr>
                    <td valign="top" width="15%" class="portlet-form-field-label">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody><tr>

                                        <td class="portlet-form-field-label"><strong>&nbsp;
                                    Police Details  
                                        &nbsp;</strong></td>


                            </tr>
                       </tbody></table>
                    </td>
                </tr>

                <tr>
                    <td width="85%">
                            <table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
                                <tbody><tr>

                                    <td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label>&nbsp;<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font>&nbsp;<font>&nbsp;
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>&nbsp;
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
    <td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;">&nbsp;&nbsp;<font class="inputField">(Text)</font> </td>
            </tr>
        </tbody>
    </table>
</td>



                                    <td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label>&nbsp;<font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font>&nbsp;<font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>&nbsp;
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>&nbsp;
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
    <td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;">&nbsp;&nbsp;<font class="inputField">(Text)</font> </td>
            </tr>
        </tbody>
    </table>
</td>

                                </tr>
                            </tbody></table>

                    </td>
                </tr>
            </tbody></table>

Answer 1

首先将 id 从“elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)”更改为“elementTableContainerCheckHidden”等其他内容

因为jquery在解析()包含id名称时抛出错误。尝试下面的解决方案，它为 elementTableContainerCheckHidden 提供 true/false 以获得隐藏可见性

    if ($('.customFormTable')
           .find('#elementTableContainerCheckHidden').css("visibility") === "hidden")  {

          $('.customFormTable').hide(); //hide your parent table 
    }