如何通过JavaScript实现评论下的回复的回复？

如何通过JavaScript实现评论下的回复的回复？

需求：
通过图中可以看出一个帖子下有有评论列表，单个评论下有回复列表，同时点击回复者的名字后还可以进行回复。
那么这个过程是怎么实现的呢？接下来解释一下他们之间的关系。帖子的id是这个过程中最重要的一个字段。评论表中的一个外键是就是帖子的id，而回复中也有一个外键是帖子的id，另一个外键是回复表的id。回复表中还有一个自身外键（回复表id->回复表pid）。
确定他们之间的关系后，先 将他们显示出来，如上图。该页面是jsp页面，所以通过jstl标签库将他们显示出来，具体先不说。
显示好了之后你怎么解决回复的问题呢？先来分析正常情况下回有哪些可能：首先通过点击回复内容中的用户名，通过焦点事件调到特定的input标签中。预想是这样的，但是实际上只会跳到第一个。具体为什么我就不多说了，直接将解决的代码和方法写出来。那就是通过特定的评论id来动态生成动态的JavaScript的方法。这样就可以解决了。
jsp页面和JavaScript代码：

<div class="box-body">
          <p class="m-a-0"><form action="/Web_Community/AskServlet?cmd=comment" method="post">
<input type="hidden" name="ask_id" value="${al.a_id }">
<input type="hidden" name="uid" value="${user.u_id }">
<div class="input-group">
          <input type="text" class="form-control" style="border-color: lightblue; border: 2px soild lightblue"  name="content" placeholder="说点什么吧">
          <span class="input-group-btn">
            <button class="btn light-blue" type="submit">评论</button>
          </span>
        </div>
</form>
<c:forEach items="${commlist}" var="commlist">
<div style="border: 1px solid rgb(240,240,240); margin-top: 10px">
	<%-- <c:if test="${commlist.c_Id==commlist.comment_comment_id && rel.comment_reply_pid == 0} "> 
	 --%><div class="box-header">
          <h3>${commlist.c_name }</h3>
          <small>发布于：${commlist.c_create_time}</small> 
        </div>
         <div class="box-body">
          <p class="m-a-0">${commlist.c_content}</p>
          <a onclick="ck('${commlist.c_name }')">评论</a>
        </div>
       <%--  </c:if>  --%>
           <!--  回复-->
              <div class="box-color text-color pos-rlt" id="rdiv" style="width:98%;margin:auto; display: block;">
                <span class="arrow top pull-left b-blue"></span>
                <div class="box-body" style="border:1px solid rgb(33,150,243)">
                 <c:forEach items="${lr}" var="rel">
		<c:if test="${rel.comment_comment_id ==commlist.c_Id}">
		<div onclick="getUpid${commlist.c_Id}(${rel.ar_id },'${rel.reply_users_name}',${commlist.c_Id})">
			<tr>
				<td>${rel.ar_id }</td>
				<td>${rel.reply_users_name}</td>
				<td>${rel.ar_content }</td>
				<td>${rel.ar_reply_time}</td>
			</tr>
			</div>
		</c:if>
	</c:forEach>
	<form  action="/Web_Community/AskServlet?cmd=reply" id="${commlist.c_Id}" method="post">
		<input type="hidden" name="ask_id" value="${al.a_id }">
		<input type="hidden" name="reply_id" id="repid${commlist.c_Id}" value="">
		<input type="hidden" name="uid" value="${user.u_id }">
		<input type="hidden" name="aid" value="${al.a_id }">
		<input type="hidden" name="comment_id" value="${commlist.c_Id}">
		<input type="hidden" name="reply_user_id" value="${user.u_id }">
		<input name="content" id="contents${commlist.c_Id}" placeholder="说点什么吧"> 
		<input type="hidden" id="uname${commlist.c_Id}" name="uname" > 
		<input  type="submit" id="sub${commlist.c_Id}" value="回复">
	</form>
                </div>
              </div>
        </div>
        <script type="text/javascript">
		function ck(cname){
			var rdiv=document.getElementById("rdiv");
			var contentinput=document.getElementById("contents");
			var u_name=document.getElementById("uname");
			contentinput.placeholder="回复"+cname;
			u_name.value=cname;
			rdiv.style.display="block";
		}
		function getUpid${commlist.c_Id}(rid,name,forms){
			var url="/Web_Community/AskServlet?cmd=replycomment";
			var contentinput=document.getElementById("contents${commlist.c_Id}");
			var actio=forms;
			var u_name=document.getElementById("uname${commlist.c_Id}");
			var sub=document.getElementById("sub${commlist.c_Id}");
			var repid=document.getElementById("repid${commlist.c_Id}");
			contentinput.placeholder="回复"+name;
			repid.value=rid;
			actio.action=url;
			//alert(contentinput.placeholder);
			sub.value="回复";
			u_name.value=name;
			contentinput.focus();
		}
	</script>
</c:forEach>

到这里就完成了，如果有不解可以联系 我或者有更好的 方法可以分享一下哦，开发中偶然发现，并无抄袭任何人。