0

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>';
4

1 に答える 1

0

問題が発生し、jQuery を使用している場合は、複数の tbody タグではなく、CSS クラスを使用して行を「グループ化」する方が簡単な場合があります。その後、jQuery セレクターを介してこれらのグループにアクセスできます。

$('.myRowClass').slideUp();
于 2012-08-08T15:38:03.320 に答える