Как скрыть родительскую таблицу на основе видимости стиля дочерней таблицы - PullRequest
Новая
       5

Как скрыть родительскую таблицу на основе видимости стиля дочерней таблицы

0 голосов
/ 25 февраля 2020

У меня есть html, как показано ниже, и в основном он содержит основную таблицу с классом как <table class="customFormTable block", и это, в свою очередь, содержит некоторые таблицы, такие как <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">

Так что я хочу, чтобы jQuery / javascript сканировал для родительской таблицы с классом table customFormTable и найдите, если у какого-либо потомка есть таблица с style="visibility: hidden;", если это так, скройте родительскую таблицу, т.е. 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>

Ответы [ 3 ]

2 голосов
/ 25 февраля 2020

Привет

какую таблицу вы хотите скрыть? Вы можете попытаться использовать jQuery как этот 

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

"yourSelector", что означает ID / Class, который является дочерним элементом или вашим селектором

"yourTarget", что означает, что ваш родитель селектор или ваша цель

«событие», означает hide () / addClass (), как это или ваше событие

Я надеюсь, вы можете попробовать это 

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

и с помощью css вы легко можете сделать это с помощью sh.

ИЛИ 

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

очень полезно, надеюсь

1 голос
/ 25 февраля 2020

сначала измените id с 'elementTableContainer (app_spec_info_POLICE_DETAILS_Police_Station)' на что-нибудь еще, например, 'elementTableContainerCheckHidden'

Поскольку jquery ошибка при разборе () содержит имя идентификатора. Попробуйте следующее решение, которое дает вам true / false для elementTableContainerCheckHidden для скрытой видимости 

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

          $('.customFormTable').hide(); //hide your parent table 
    }
0 голосов
/ 25 февраля 2020

вам нужно пройти все tds и найти элемент таблицы. 

$(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>
...