テーブル行が右に移動する

Jqueryで詳細情報を読み込むと、テーブルに問題があるようです。テーブル行が右に移動する

[more info]リンクをクリックすると、より多くのコンテンツがスライドダウンしますが、残念ながらの表が正しく展開されているようです。ここで

は良く説明するために拡張されているページの画像です：

'詳細' リンクをクリック：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Title Here</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="listing.js"></script> 

</head> 

<body> 
    <div id="login-nav"> 
     <a href="login.php">Please Login!</a> </div> 
    <div id="top-nav"> 
    <a href="index.php">Home</a> 
     <a href="buy.php">Sites</a> 
     <a href="register.php">Sign-Up</a> 
     <a href="login.php">Login</a> 
     <a href="myac.php">My Account</a> 
    </div> 

<div id="page-wrap"> 

<div id="curve-container"></div> 
<div id="main-content"> 
    <div id="article-area"> 

     <h1>Sites</h1> 
    <div id="output-listings"> 
     <div class="main-info"> 
<table class="listings"> 
<tbody> 
    <tr id="more-info-1" class="mi-1"> 
    <td> 
      <div class="more-information-1"></div> 
    </td> 
    </tr> 
    <tr id="main-info-1"> 
      <td>Leftlane News</td> 
      <td>www.leftlanenews.com/</td> 
      <td><a id="link-1" class="more-info-link" href="#">More info</a></td> 
    </tr> 
    <tr id="more-info-2" class="mi-2"> 
    <td> 
      <div class="more-information-2"></div> 
    </td> 
    </tr> 
    <tr id="main-info-2"> 
      <td>Motor Authority</td> 
      <td>www.motorauthority.com/ </td> 
      <td><a id="link-2" class="more-info-link" href="#">More info</a></td> 
    </tr> 
    <tr id="more-info-3" class="mi-3"> 
    <td> 
      <div class="more-information-3"></div> 
    </td> 
    </tr> 
    <tr id="main-info-3"> 
      <td>Autoblog</td> 
      <td>http://www.autoblog.com/</td> 
      <td><a id="link-3" class="more-info-link" href="#">More info</a></td> 
    </tr> 

</tbody> 
</table> 
</div> 
    </div><!--end output-listings--> 

    </div> 
    <div class="clear"></div> 
</div> 
<div id="footer"></div> 

<div id="curve-container"></div> 
<div id="features"> 
    <div id="p-header"> 

     <h1>Header Here</h1> 
     <p>Text Here.</p> 
    </div> 
</div> 
<div id="ft-bottom"></div> 
<div id="text-footer"><p>Copyright &copy; 2009 . All rights reserved.</p></div> 

</div> 

</body> 

</html>

：

Click Here

そしてここでは、ページのソースであります

誰でも何が起こっているのか知っていますか？

そして、ここでは誰もがそれをかいま見を取る必要がある場合、CSSファイルです：

* { 
    margin: 0; 
    padding: 30px 45px; 
} 

body { 
    background: #EFEFEF none repeat scroll 0 0; 
    color: #333333; 
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; 
    font-size: 12px; 
    font-size-adjust: none; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: 18px; 
} 
/* TOOLBOX */ 

.clear { clear: both; } 
/* END TOOLBOX */ 
#top-nav { 
    text-align: right; 
} 
    #top-nav a { 
     padding: 10px 30px; 
     text-decoration: none; 
     } 
     #top-nav a:link { 
      color: #333333; 
      } 
      #top-nav a:visited { 
       color: #999999; 
       } 
       #top-nav a:hover { 
        color: #0088CC; 
        } 
#page-wrap { 

    } 
    #curve-container { 
    background: url(content_bgtop.gif) no-repeat scroll 0 0; 
    padding: 2px 26px; 
    width: 932px; 
    } 
    #main-content { 
    width: 984px; 
    background: url(content_bg.gif) repeat-y; 
     } 
    #article-area { 
     } 
#footer { 
    background: url(content_bgbottom.gif) no-repeat; 
    width:932px; 
} 
#features { 
    width: 984px; 
    background: url(content_bg.gif) repeat-y; 
} 
    #p-header { 
     } 
     #ft-bottom { 
      background: url(content_bgbottom.gif) no-repeat; 
      width:932px;  
     } 
#text-footer { 
    font-size: 10; 
    text-align: center; 
} 
.spacer{clear:both; height:1px;} 

.formlogin { 
    margin: 0 auto; 
    width: 720px; 
    padding: 40px; 
    } 
#loginform { 
    border: solid 2px #333333; 
    background: #EFEFEF; 
    } 
    #loginform label { 
     display:block; 
     font-weight:bold; 
     text-align:right; 
     width:140px; 
     float:left; 
     } 
     #loginform .small { 
      color:#666666; 
      display:block; 
      font-size:11px; 
      font-weight:normal; 
      text-align:right; 
      width:140px; 
      } 
      #loginform input { 
       float:left; 
       font-size:12px; 
       padding:4px 2px; 
       border:solid 1px #aacfe4; 
       width:200px; 
       margin:2px 0 20px 10px; 
       } 
#output-listings { 
    margin-top: -150px; 
    margin-bottom: 20px; 
    padding: 0px; 
    } 
    table { 
     width: 800px; 
     } 
#listing-db { 
    padding: 0px; 
    } 

tr.hover td { background: #FDFFE7; } 
    table { border-collapse:collapse; 
      color:#3F3F3F; 
      font-family:arial,helvetica,sans-serif; 
      border-top:1px solid #DFDFDF; 
      } 

#output-listings { padding-top: 150px; } 


.mi { display: none; 
    width: 800px; }

出典

2009-07-14 Spyderfusion02

私たちは、あなたが実際にやっているかを見ることができますので、あなたのJSを投稿することができますか？それがバグが存在する可能性が高い場所です。 –

firebugをインストールし、jQueryスクリプトが変更を加える前後にテーブルを調べます。 – Sampson

がどのようにJS/jQueryの経由で詳細情報を「表示」されていますか？ .toggle()を使用しているか、ディスプレイを手動で設定していますか？

要素はtable要素である場合は、block代わりのtable-cell

にその表示を設定することがあり、それは、デバッグが容易であるので、あなたのJSファイルを投稿してください。ここで

出典

2009-07-15 18:32:24

は、JSファイルです：

$(function(){ 
    $("tr").hover(function(){ 
     $(this).addClass("hover"); 
    }, function() { 
     $(this).removeClass("hover"); 
    }); 

$('.more-info-link').click(function(){ 
    var id = $(this).attr('id'); 
    var num = id.substr(id.length-1,1); 
    $('#more-info-'+num).toggle('fast'); 
    return false; 
}) 


});

出典

2009-07-17 21:26:12 Spyderfusion02

テーブル行が右に移動する

答えて

関連する問題