如何在使用 TBODY 对单元格进行分组时使用 ROWSPAN

Question

我正在使用JQuery来切换幻灯片向下和幻灯片为表中的行的一部分。为了对这些行进行分组，我正在使用 tbody。到目前为止，Tbody是唯一对我有用的分组方式。不幸的是，将这些行包装在 tbody 中使得行跨度不再影响这些行，并且对我的表的布局产生了不利影响。有没有办法同时使用行跨度和 tbody，或者可能使用不同的跨行/分组方法？

杰奎里

$(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();
});

表（在 php 内）

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

如果您遇到问题并且正在使用 jQuery，那么使用 CSS 类来"分组"您的行而不是多个 tbody 标签可能更简单 - 然后您可以通过 jQuery 选择器访问这些组。

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