2011-01-17 5 views
1

나는이 CSS 스타일링을 사용하며 비어있는 HTML 테이블을 축소/숨기기 위해 무엇을 변경해야하는지 궁금합니다.표시 할 데이터가없는 테이블 숨기기

스타일 :

<style> 
#search_settings 
{ 
    position:relative; 
    height:25px; 
    width:500px;  
} 

#users_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 

#events_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 

#establishments_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 
</style> 

내 HTML :

<div id="search_settings"> 
<table width="500" border="0"> 
    <tr> 
    <td height="20" class="heading_text_18">Search results</td> 
    </tr> 
</table> 
<table id="users_table_results" max-width="500" name="users" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td> 
    </tr> 
</table> 
<table id="events_table_results" width="500" name="events" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td> 
    </tr> 
</table> 
<table id="establishments_table_results" width="500" name="establishments" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td> 
    </tr> 
</table>      
</div> 

내가 내 이벤트 테이블에 대한 결과가없는 경우는, 테이블이 표시되지 않는 것을 원하는 것이가 (공 i이 없다 border = 0이므로 이벤트 결과가 있어야하는 검색 결과 사이의 공백). 전체 테이블을 숨길 수 있습니까?

답변

0

가장 좋은 방법은 PHP와 같은 서버 측 언어를 사용하여 SQL 쿼리를 기반으로 필요한 테이블을 생성하는 것입니다. 이렇게하면 더 짧고 효과적인 코드가 생성됩니다. 이 단지 사용 CSS와 기존 코드를 달성하려면

+0

고마워요. 에코를 사용하여 테이블을 생성하는 PHP 코드를 만들었습니다. 내 문제를 해결했습니다. –

2

전체 테이블을 PHP if 문으로 묶은 다음이를 사용하여 데이터를 확인하고 표를 표시하지 않는 이유는 무엇입니까? 당신은 서버 측 마크 업의 무료 클라이언트 측 HTML을 유지하고 100 % 별도의 콘텐츠 및 동작을 유지할 수 있도록하고 싶었다면

+0

덕분에 대답을 –

1

, 당신은 어떤 행 요소가 발견되지 않은 모든 테이블을 숨길 JQuery와 사용할 수 있습니다

$(document).ready(function() { 
    $('table').each(function() { 
     if($(this).find('tr').length == 0) { 
      $(this).hide(); 
     } 
    }); 
}); 
+0

주셔서 감사합니다. 나중 단계에서 jQuery를 사용해 보겠습니다. –

+0

@Kinyanjui - 이것은 생각할 필요가 없습니다. 위의 코드는 페이지의 섹션에있는