CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
JavaGeek
JavaGeek

Reputation: 1529

How to hide parent table based on child table style visibility

I have a html as below and basically it contains main table with class as <table class="customFormTable block" and this in turn contains some tables like <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">

So i want jQuery/javascript to scan for parent table with class table customFormTable and find if any children has table with style="visibility: hidden;", if so hide the parent table i.e 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>

Upvotes: 0

Views: 266

Answers (3)

Negi Rox
Negi Rox

Reputation: 3932

you need to traverse all tds and find table element.

$(document).ready(function(){
   var tds=$(".customFormTable tbody tr td")
   $.each(tds,function(){
      var htmls=$.parseHTML($(this).html())
      $.each(htmls,function(i,o){
        if(o.outerHTML)
          if(o.outerHTML.indexOf("table")){
          console.log(o.style.visibility)
          if(o.style.visibility=='hidden' || o.style.display=='none')
            console.log(o)
            $(".customFormTable").hide();
          }
     
      })
      
   })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Upvotes: 0

Meet Patel
Meet Patel

Reputation: 510

first change id from 'elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)' to anything else like 'elementTableContainerCheckHidden'

Because jquery throw error while parsing () contains id name. Try below solution which gives you true / false for elementTableContainerCheckHidden for hidden visibility 

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

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

Upvotes: 1

Masud Rana
Masud Rana

Reputation: 630

Hello

which table do you want to hide ? You can try to use jQuery like this

$("yourSelector").find(' + "yourTarget"').event("");

"yourSelector" , that means ID/Class which is the child or your selector

"yourTarget" , that means your parent of the selector or your target

"event", means hide()/addClass() like this or your event

I hope you can try this

$("yourSelector").find(' + "yourTarget"').addClass("yourClass");

and by the help of css you can easily done you wish.

OR

$("yourSelector").find(' + "yourTarget"').hide();

is very helpful I hope

Upvotes: 0

Related Questions