2010-05-02 94 views
3

嘿,我想了解如何在一些html代碼中插入註釋而不必刷新頁面。我知道jQuery是能夠插入註釋到一個div區域的,但我有發現與衰落像這樣的例子問題,這是我的註釋代碼:jQuery插入評論幫助

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
      <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
      <textarea name="txtComment" class="box" id="txtComment"></textarea> 
      <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
      <div class="buttons" align="center"> 
       <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
      </div> 
    </form> 
</div> 
</div> 

我需要重新插入將是代碼:

<table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
    <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
    <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
    <tr><td class="Commentsaying">this is a test comment</td></tr> 
</table> 

但同樣,我無法使用jQuery自動插入其他的「表>/TABLE>」框下面的那部分代碼,以找到一個例子..

其所以以後插入的jQuery ,代碼應如下所示:

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

    <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
     <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
     <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
     <tr><td class="Commentsaying">this is a test comment</td></tr> 
    </table> 

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
      <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
      <textarea name="txtComment" class="box" id="txtComment"></textarea> 
      <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
      <div class="buttons" align="center"> 
       <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
      </div> 
    </form> 
</div> 
</div> 

一如既往,任何幫助都會很棒! :O)

大衛

+0

SOOOOO MUUCHHHHH HTMLLLLL !!!! – mattbasta 2010-05-02 19:29:21

回答

2

鑑於你的結構,你可以這樣做:

$("#stylized").before(htmlString); 

其中「#stylized」是你輸入的形式和「htmlString」容器的ID是你想要插入你的新表的HTML。此方法將始終將新字符串附加到表列表的末尾,但在輸入表格之前。

編輯: 其實,我懷疑你的ID爲輸入表單 - 看起來它可能不是唯一的頁面。你也可以這樣做:

$("#stylized", "#CommentBox122").before(htmlString); 

這將「#stylized」 ID選擇限制對元素「#CommentBox122」的範圍內。

+0

這個伎倆。謝謝BradBrening! :O) – StealthRT 2010-05-02 20:03:42

0

匹配的評論框的最後一個元素,然後用.before(字符串,元素,HTML)插入註釋。