关于如何通过添加按钮，来追加table中的td操作

关于如何通过添加按钮，来追加table中的td操作

讲讲开这章博客的理由吧：我在开发过程中遇到了一个需求，就是当我点击某个功能时，打开的界面如图2 所示，当我再次新增一个新的标签，需要的结果就是再原有的表格table格式下追加我添加的<td>，但是实际开发过程中，用到的是html 的append（）追加方法，但是这个方法存在一个问题，就是追加的内容有个要求，是在指定的id后面进行追加，你无法确定你要在哪个id后面追加，因为你可能在开发的时候，用的是<for:each>来遍历集合的，集合的大小不定，存在着变数，所以无法达到需求。

通过各个途径查询资料，更多的就是追加行，列，少数是追加单元格，但达不到需要的成果。因此，在我多番尝试之下，终于完成了。

相信看到这章的人都是有一些开发经验的人，如何实现下面两张图内容的前后台代码我在此就不啰嗦了。

图2

图示例

那么如何实现点击添加之后带有格式的“追加”呢！请耐心看下文。

完整的html代码

<!-- 标签页面 start-->
	<div style="margin: 15px 0px 0px 15px; width: 700px">
		<form id="archLabel_fm" method="post">
			<div class="form_section" style="width:700" id="addArchLabel_div">
				<div>
					<input type="hidden" name="id" id="id"/>
					<div class="colspan2">
						<div class="label">标签名称</div>
						<div class="content">
							<input id="name" name="name" class="easyui-textbox" data-options="required:true,fit:true"  validType="archLabelNameVali"> 
						</div>
					</div>
					<div class="colspan2">
						<div class="label">排序</div>
						<div class="content">
							<input id="orderNum" class="easyui-numberspinner" name="orderNum" value=1 data-options="min:1,max:999999,fit:true,required:true"/> 
						</div>
					</div>
				</div>

			</div>	
		</form>
		
		<form id="archLabelRelevence_fm" method="post">
		<div class="form_section" style="width:700px" id="addArchLabelRelevence_div">
			
				
				<div >
					<div class="colspan2">
						<div class="label">选择</div>
						<div class="content" id="ck" style="margin: 0px 0px 0px 65px;width:500px;height:100px;overflow-y:scroll; ">
							 <table id="ckecboxs">
							
								<c:forEach var="label" items="${labels}" varStatus="status">
									<c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}"> 
										<tr>
									</c:if>
									
									   <td width="125px"><input name="checkItem" type="radio" value="${label.id}">${label.name}</td>
									<c:if test="${status.count == labels.size() }">
                                       </tr>
                                    </c:if>
                                    <c:if test="${status.count != labels.size() }">
                                       <c:if test="${status.count % 4 eq 0 || status.count eq 4}">    
											</tr>
										</c:if> 
                                    </c:if>
								 
							</c:forEach>
								
							</table>
							<table id="radios"  style="display: none;">
							
								<c:forEach var="label" items="${labels}" varStatus="status">
									<c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}"> 
										<tr >
									</c:if>
									
									   <td width="125px" >
									   <input  name="radioItem" type="radio" value="${label.id}">${label.name} </td>
									<c:if test="${status.count == labels.size() }">
                                       </tr>
                                    </c:if>
                                    <c:if test="${status.count != labels.size() }">
                                       <c:if test="${status.count % 4 eq 0 || status.count eq 4}">    
											</tr>
										</c:if>
                                    </c:if>
									
								 
							</c:forEach>
								
							</table>
						</div>
					</div>
				</div>	
				<div>
						<input type="hidden" name="ids" id="ids" value="${ids }"/>
						<input type="hidden" id="rootCodes" value="${rootCodes }"/>
						<input type="hidden" id="oldlabelids" value="${oldlabelids }"/>
						<input type="hidden" id="type" value="${type}"/>
						<div id="addLbs" class="colspan2">
							<div class="label">添加新标签</div>
							<div class="content" style="width:300px">
						
								<input id="labelname" name="labelname" value="" class="easyui-textbox" style="width:200px"  validType="archLabelNameVali"> 
								<!--排序:<input id="orderNoNew" name="orderNoNew"  class="easyui-numberspinner" value=1 data-options="min:1,max:999999,width:50"/>-->
								 <input id="orderNoNew" name="orderNoNew" type="hidden" value=1 /> 
								<a class="easyui-linkbutton" id="add" onClick="addLabel('${oldlabelids}')">添加</a>
							</div>
						</div>
						
				</div>
			 </div>
		</form>
	</div>
	
<!-- 标签页面 end -->

具体的请求方法

	function addLabel(flag){
			//1.验证标签是否存在 ，若不存在则向标签表中添加一条数据     2.若添加成功，则在checkbox后面追加一个checkbox，并选中
			var labelname = $('#labelname').textbox("getValue"); 
			if(labelname==""){
				$.messager.alert("提示","请输入标签名称","info");
				return false;
			}
			/* var order = $('#orderNoNew').numberspinner("getValue"); 
			if(order==""){
				$.messager.alert("提示","请输入排序","info");
				return false;
			} */
			
			$('#archLabelRelevence_fm').form('submit',{
				//url: "odoc/saveorupdateArchivesLabel.action?labelname="+labelname+"&orderNoNew="+order,
				url: "odoc/saveorupdateDocLabel.action",
		        method: 'post',
		        success: function(result){
		        	result = $.parseJSON(result);
		            if (result.success){
		            	$('#ck').html("");//清空原数据
		            	var oldlabelids=$("#oldlabelids").val();
		            	$.ajax({
							type : "POST",
							url : 'odoc/queryLabelInfoList.action',
							dataType : "json",
							async : false,
							data : {
								oldlabelids : oldlabelids
							},
							success : function(results) {
								var html="";
								if(flag==""){
								html+="<table id='ckecboxs'>";
								}else{
								html+="<table id='radios'>";
								//追加节点树
								appendTree(result.data.id,result.data.name);
								
								}
								$.each(results,function(index,data){
									 if((index)%1==0||(index+1)==1){
										html+="<tr>";
									}
									html+="<td width='125px'>";
									if(flag==""){
										html+="<input  name='checkItem' type='checkbox' ";
										if(index==0){
											html+=" checked='true' "
										}
										html+=" value="+data.id+">"+data.name+"</td>";
										}else{
										html+="<input  name='radioItem' type='radio' ";
										if(index==0){
											html+=" checked='checked' "
										}
										html+=" value="+data.id+">"+data.name+"</td>";
										}
									if(index==results.length-1){
										html+="</tr>";
									}else{
										 if((index+1)%4==0||(index+1)==4){
											html+="</tr>";
										}
									} 
								});
								html+="</table>";
								$('#ck').html(html);
							}
						});
		            	$('#labelname').textbox('clear');
		            	$.messager.show({title: '成功',msg: result.title});
		            } else {
		                $.messager.show({title: '错误',msg: result.title});
		            }
		        }
			});
		}