TBODY로 셀을 그룹화하는 동안 ROWSPAN을 사용하는 방법은 무엇입니까?

Question

JQuery를 사용하여 테이블의 행 섹션에 대해 slideDown 및 slideUp을 토글합니다. 이 행을 그룹화하려면 tbody를 사용하고 있습니다. Tbody가 지금까지 저에게 효과가있는 그룹화의 유일한 방법입니다. 불행하게도 tbody에서 이러한 행을 래핑하면 rowspan이이 행에 더 이상 영향을 미치지 않으므로 내 테이블의 레이아웃에 나쁜 영향을줍니다. 행 스파 스와 tbody를 함께 사용하거나 행을 그룹화/스패닝하는 다른 방법을 사용할 수 있습니까?

echo '<table border="1" style="width: 330px;">'; 

echo '<tr style="width: 330px;">'; 
echo '<td colspan="3"><h1>'.highlight($search,$name).'</h1></td>'; 
echo '</tr>'; 

echo '<tr style="width: 100px; vertical-align: top;">';  
if($pic=='true'){ 
    if(empty($filename)){ 
     echo '<td rowspan="7" style="width: 100px; height: 130px;"> 
     <div style="width: 100px; height: 130px; overflow: hidden;"> 
     <img src="documents/hr_contacts/nophoto.jpg" alt="'.$name.'" height="100%" style="margin-left: -18px; margin-top: -1px;"> 
     </div> 
     </td>'; 
    }else{ 
     if($width/$height<.769){ 
       echo '<td rowspan="7" style="width: 100px; height: 130px;"> 
       <div style="width: 100px; height: 130px; overflow: hidden;"> 
       <img src="documents/'.$tablename.'/'.$filename.'" alt="'.$name.'" width="100%"/> 
          </div> 
       </td>'; 
      }else{ 
      echo '<td rowspan="7" style="width: 100px; height: 130px;"> 
      <div style="width: 100px; height: 130px; overflow: hidden;"> 
      <img src="documents/'.$tablename.'/'.$filename.'" alt="'.$name.'" height="100%" style="margin-left: -'.((((130/$height)*$width)-100)/2).'px;"/> 
      </div> 
      </td>'; 
     } 
    } 
} 

echo '<td style="width: 90px;">Phone: </td>'; 
echo '<td style="width: 140px;">'.highlight($search,$phone).'</td>'; 
echo '</tr>'; 

echo '<tr style="width: 230px;">'; 
echo '<td style="width: 90px;">Email: </td>'; 
echo '<td style="width: 140px;"><a href="mailto:'.$email.'">'.highlight($search,$email).'</a></td>'; 
echo '</tr>'; 

    echo '<tbody class="parent">';  
echo '<tr style="width: 230px;">'; 
echo '<td colspan="2"><a href="#" onclick="return false;">Personal Contact Info</a></td>'; 
    echo '</tr>'; 
echo '</tbody>'; 


echo '<tbody id="test" class="child">'; 
if(!empty($cell)){ 
    echo '<tr style="width: 230px;">'; 
    echo '<td style="width: 90px;">Cell Phone: </td>'; 
    echo '<td style="width: 140px;">'.highlight($search,$cell).'</td>'; 
     echo '</tr>'; 
} 

if(!empty($homePhone)){ 
    echo '<tr style="width: 230px;">'; 
    echo '<td style="width: 90px;">Home Phone: </td>'; 
    echo '<td style="width: 140px;">'.highlight($search,$homePhone).'</td>'; 
    echo '</tr>'; 
} 

if(!empty($perEmail)){ 
    echo '<tr style="width: 230px;">'; 
    echo '<td style="width: 90px;">Personal Email: </td>'; 
    echo '<td style="width: 140px;"><a href="mailto:'.$email.'">'.highlight($search,$perEmail).'</a></td>'; 
    echo '</tr>'; 
} 

if(!empty($address)){ 
    echo '<tr style="width: 230px;">'; 
    echo '<td style="width: 90px;">Address: </td>'; 
    echo '<td style="width: 140px;">'.highlight($search,$address).'</td>'; 
    echo '</tr>'; 
    echo '</table>'; 
} 
echo '</tbody>'; 

echo '</table>'; 

Answer 1

(PHP 이내)

JQuery와

$(document).ready(function() { 
$('.parent').click(function() { 
    if($(this).next().is(':hidden') == true) { 
     $(this).addClass('on'); 
     $(this).next().slideDown('normal'); 
    }else{ 
     $(this).removeClass('on'); 
     $(this).next().slideUp('normal'); 
    }  
    }); 
    $('.child').hide(); 
}); 

표는 당신이 문제에 실행하는 경우 당신이 "그룹"CSS 클래스를 사용하는 것이 더 간단 할 수 jQuery를 사용하고 당신을 여러 tbody 태그 대신에 행을 추가하면 jQuery 선택기를 통해 해당 그룹에 액세스 할 수 있습니다.

$('.myRowClass').slideUp();