Question

我正在使用JQuery为我表中的一部分行切换slideDown和slideUp。要对这些行进行分组，我正在使用tbody。 Tbody是迄今为止对我有用的唯一分组方式。不幸的是，将这些行包装在tbody中使得rowspan不再影响这些行并且对我的表的布局产生了不利影响。有没有办法同时使用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();

如何在使用TBODY对细胞进行分组时使用ROWSPAN？

1 个答案: