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

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

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

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

图1

图3

图2

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

dialog打开，初始化加载页面，页面table的代码如下：

<div class="content" id="ck" style="margin: 0px 0px 0px 65px;width:500px;height:100px;overflow-y:scroll; ">

<table id="radios"  style="display: none;">

<c:forEach var="label" items="${labels}" varStatus="status">      <!--遍历url请求后台传递过来集合-->
<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 % 4 eq 0 || status.count eq 4}">    
</tr>
</c:if>
 
</c:forEach>

</table>

<div>

<input id="labelname" name="labelname" value="" class="easyui-textbox" style="width:200px"  validType="archLabelNameVali">

<a class="easyui-linkbutton" id="add" onClick="addLabel()">添加</a>

点击添加按钮，调用方法addLabel（）

function addLabel（）{

//首先先清空初始化时加载的表格，因为你不可能再在上面做追加操作。

$('#ck').html("");

// 通过ajax请求

$.ajax({
type : "POST",//此部分可忽略，就是通过请求取获取我们想要的集合，
url : 'odoc/queryLabelInfoList.action',
dataType : "json",
async : false,
data : {
oldlabelids : oldlabelids
},
success : function(result) {  //重点在这，重新画一个表格，然后放到$("#ck").html（）上去
var html="";        //定义变量
html+="<table id='radios'>";    //画表头
$.each(result,function(index,data){     //遍历集合

if((index)%4==0||(index+1)==1){   //在这里判断需要在第几个换行，由于index是下标从0开始，所以初始时就画一个tr
html+="<tr>";
}
html+="<td width='125px'>";//给定各个td的宽度
html+="<input  name='radioItem' type='radio' value="+data.id+">"+data.name+"</td>";   // 这里放入你要后续传递的值与显示的值（需要注意单双引号的使用）所有拼html最麻烦的可能就是这个了，表示深受毒害啊
if((index+1)%4==0||(index+1)==4){   //前面的tr   此处的/tr   
html+="</tr>";
}    
});
html+="</table>";
console.info(html);
$('#ck').html(html);
}
});

$('#labelname').textbox('clear'); //最后清空输入框。

}