Verschiebung der Tabellenzeilen nach rechts

Ich habe ein Problem mit meiner Tabelle, wenn ich mehr Informationen mit Jquery einlade.Verschiebung der Tabellenzeilen nach rechts

Wenn ich auf den Link "Weitere Informationen" klicke, werden mehr Inhalte eingeblendet, aber leider scheint die Tabelle richtig zu erweitern oder so.

sind hier ein Bild von der Seite erweitert besser zu erklären:

'weitere Informationen' Link geklickt:

Click Here

Und hier ist die Seite Quelle:

<!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>

Wer weiß was los ist?

Und hier ist die CSS-Datei, wenn jemand einen Blick darauf zu werfen braucht:

* { 
    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; }

Quelle

2009-07-14 Spyderfusion02

können Sie Ihre js veröffentlichen, so können wir sehen, was Sie tatsächlich tun? Dort liegt der Fehler wahrscheinlich. –

Installieren Sie den Firebug, und untersuchen Sie die Tabelle, bevor und nachdem das jQuery-Skript seine Änderungen vorgenommen hat. – Sampson

Wie Sie über JS/jQuery die mehr Info „zeigt“? Verwenden Sie .toggle() oder stellen Sie die Anzeige manuell ein?

Wenn das Element ein Tabellenelement ist, können Sie Ihre JS-Datei seine Anzeige zu block statt table-cell

Bitte verfassen Einstellung, so dass es leichter zu debuggen ist. Hier

Quelle

2009-07-15 18:32:24

ist die JS-Datei:

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


});

Quelle

2009-07-17 21:26:12 Spyderfusion02

Verschiebung der Tabellenzeilen nach rechts

Antwort

Verwandte Themen