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

Question

我正在使用 JQuery 为我的表中的一部分行切换 slideDown 和 slideUp。为了对这些行进行分组，我使用了 tbody。 Tbody 是迄今为止对我有用的唯一分组方式。不幸的是，将这些行包装在一个 tbody 中使得行跨度不再影响这些行并且对我的表格的布局产生了不利影响。有什么方法可以同时使用 rowspan 和 tbody 或者使用不同的跨越/分组行的方法？

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

表格（在 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();