Блог

Всем привет, я пытаюсь узнать, как вставить комментарий в некоторый html-код без необходимости обновления страницы. Я знаю, что jQuery способен вставлять комментарий в область div, но у меня возникают проблемы с поиском подобного примера с исчезновением. Вот мой код комментария:

 <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="imgbuttonimgComment.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="imgbuttonimgComment.png" alt="" />Post Comment</button> 
            </div> 
    </form> 
</div> 
</div>
  

Как всегда, любая помощь была бы отличной! :o)

Дэвид

Учитывая вашу структуру, вы могли бы сделать это:

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

Где «#stylized» — это идентификатор контейнера для вашей формы ввода, а «HtmlString» — это HTML-код вашей новой таблицы, которую вы хотите вставить. При таком подходе новая строка всегда будет добавляться в конец вашего списка таблиц, но перед формой ввода.

РЕДАКТИРОВАТЬ: На самом деле, я с подозрением отношусь к вашему идентификатору для формы ввода — похоже, что он может быть не уникальным для страницы. Вы также могли бы сделать это:

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

Это ограничит выбор идентификатора «#stylized» в контексте элемента «#CommentBox122».

Сопоставьте последний элемент поля комментариев, а затем используйте .before( строку, элемент, html ) для вставки комментария.