论坛管理员回复功能【仿QQ空间回复】

 

利用javascript创建标签追加到指定的位置，然后级enter按钮赋于一个ajax事件将回复内容存入数据库，同时将追加的文本框和按钮替换值赋给Li变成显示出来( 声明下这里的jQuery是我自个写的一些脚本！）

代码：

<div id="conment" class="coment">
        <asp:Repeater ID="rptConment" runat="server" OnItemCreated="rptConment_ItemCreated">
            <HeaderTemplate>
                <table width="100%" cellpadding="0px" cellspacing="0px">
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td class="conment_left" valign="top">
                        <ul>
                            <li>Name：<%# Eval("CCOMMENTID.UNAME")%></li>
                            <li>E-mail：<%# Eval("CCOMMENTID.UEMAIL")%></li>
                            <li>Phone：<%# Eval("CCOMMENTID.UPHONE")%></li>
                            <li>Status：<%# Utility.StatusName(Convert.ToInt32( Eval("CCOMMENTID.USTATUSID.SID"))) %></li>
                            <li>Address：<%# Eval("CCOMMENTID.UADDRESS")%></li>
                            <%--                        <li>About：<span runat="server" id="spAbout"> </span></li>--%>
                        </ul>
                    </td>
                    <td class="conment_right" valign="top">
                        <ul>
                            <li class="td_ul_li_top">Time:<%# Eval("CTIME") %>
                                <span style="padding-left: 500px;">#<%# rptIndex %>楼&nbsp;<a onclick="reversion(this)"
                                    id='<%# Eval("CID","rev{0}") %>'>回复</a>|<a href="" id='<%# Eval("CID","del{0}") %>'>删除</a></span></li>
                            <li>
                                <%# Eval("CCONTEXT")%>
                                <div class="reversion" id='<%# Eval("CID","div{0}") %>'>
                                    <div class="reversion_li_top">
                                        <%# Revsion(Eval("CreversionTime")) %>
                                    </div>
                                    <div id="a">
                                        <%# Eval("CREVERSION") %>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table></FooterTemplate>
        </asp:Repeater>
        <div style="margin-top: 10px;">
            <iframe src="ifrmae.aspx?UID=<%= Request.QueryString["UID"] %>" width="1000px" height="250px"
                frameborder="0" marginheight="0px" marginwidth="0px" scrolling="no"></iframe>
        </div>
    </div>

    <script src="jQuery/JScript.js" type="text/javascript"></script>

    <script type="text/javascript">
    var divItems=document.getElementsByTagName("DIV");
  
    for(var i=0;i<divItems.length;i++)
    {
    if(divItems[i].className=="reversion")
    {
     var temp_obj=divItems[i];
     var temp_obj_node=divItems[i].childNodes[0];
     if(temp_obj_node.innerText==undefined||temp_obj_node.innerText=="")
     {
      temp_obj_node.parentNode.style.display="none";//将回复层隐藏
     }
    }
    }
   
    //回复事件
    function reversion(obj)
    {
     var id=/\d+/ig.exec(obj.id);
     var rev_div= $("div"+id);//获得回复文本对象
     var txt=document.createElement("textarea");//创建一个复文本框
     txt.className="input";
     txt.id="txt"+id;
     txt.cols="10";
     txt.rows="10";
     txt.style.width="300px";
     txt.style.height="50px";
    
     var btn=document.createElement("input");//创建一个按钮
     btn.type="button";
     btn.id="btn"+id;
     btn.className="input";
     btn.value="enter";
     btn.onclick=function(){enterEvent(id,txt);}
    
    
     if(rev_div.style.display=="none")
     {
     rev_div.childNodes[0].appendChild(txt);
     rev_div.childNodes[1].appendChild(btn);
     rev_div.style.display="block";
     }else
     {
      alert("To have responded by!");//提示以有回复！
     }
    
    
    }
    function enterEvent(id,txt)
    {
     var temp=txt.value;
    $("div"+id).childNodes[0].innerHTML="Reversion Time:"+new Date().toLocaleTimeString();
    $("div"+id).childNodes[1].innerHTML=temp;
    }
   
    </script>