table追加td，循环遍历得到table数据，后台json转对象

---

在input框输入长度为20并且只能是数字或字母的内容按回车，显示内容到页面表格上，并且table的宽度为6个td，最多只能100个td。

本功能在easyUI的基础上实现。

在jsp页面，写一个输入框，设置id为addId。

<input style="width:250px;height:30px;font-size:16px;"  id="addId" placeholder="请输入" type="text"/>	

并且写一个table，并设置id为addTab，作用是展示输入的信息。

<div style="overflow:auto;width:1200px;height:280px;">
  <table id="addTab">
   		<tr></tr>
  </table>
</div>

在js中，编写输入框的回车事件,判断是否符合要求并追加td。

$('#addId').keydown(function(e){
   	   if(e.keyCode==13){//keyCode为13是回车
   			
   			if(($("#addTab").find("td").length)==100){
           		$.messager.alert('提示','<p style=\"color: red\" >输入内容过多！！！</p>','info');
           		return;
           	}
   			
   		   var addId=$("#addId").val();
   		   
   		   var reg = new RegExp("^[0-9A-Za-z]+$");//正则，只能为数字或字母  
           if(!reg.test(addId)){
        	   $.messager.alert('提示','<p style=\"color: red\" >只能是数字或字母！！！</p>','info');
        	   return;
           }
   		   if(addId.length>20){
   			   $.messager.alert('提示','<p style=\"color: red\" >长度不能超过20！！！</p>','info');
   			   return;
   			}
   		   

   			if($("#addTab").find("td").length<6){//刚开始没有td,所以从0开始，此判断是追加6个td
          		$("#addTab").find("tr").eq($("#addTab").find("tr").length-1).append("<td style=\"font-size:14px;padding-left:20px;\">" + addId + "</td>");
          	}else if(($("#addTab").find("td").length)%6==0){//此处判断是否为每行的最后1个td，是的话，追加tr和td。
          		$("#addTab").append("<tr><td style=\"font-size:14px;padding-left:20px;\">" + addId + "</td></tr>");
          	}else if(($("#addTab").find("td").length)%6<6&&($("#addTab").find("td").length)%6>0){//此处是追加从第2行开始及以上并且不是每行的最后1个td，
          		$("#addTab").find("tr").eq($("#addTab").find("tr").length-1).append("<td style=\"font-size:14px;padding-left:20px;\">" + addId + "</td>");
           } 
	 }
 });

输入后回车显示的结果如下：

以下是得到table中的数据并以json格式存放在addResult数组中，就可以将得到的数据以json的形式传到后台。

var tr=$("#addTab tr");
var addResult=[];
for(var i=0;i<tr.length;i++){
	var tds=$(tr[i]).find("td");
	console.log(tds);
	if(tds.length>0){
		for(var j=0;j<tds.length;j++){
			addResult.push({'addId':$(tds[j]).html()});
		}
	}
}
console.log(addResult);

---

以下是在后台将json格式数据转换成对象并存在List中（以下只是方法体，适用大部分的json转为实体类）。

		String addResult = request.getParameter("addResult");
		System.out.println("addResult"+addResult);
		//将json转为对象
		List<Add> addList=new ArrayList<Add>();
		if(addResult.contains("},")){//判断是否不止一个json格式数据
			String[] rowInfo = addResult.substring(1, addResult.length()-1).split("},");
			for(int i=0;i<rowInfo.length;i++){
				if(i==0){//判断是不是截取后的第一个json格式数据
					rowInfo[i]=rowInfo[i]+"}";
					Add add =  JSON.parseObject(rowInfo[i], Add.class);
					addList.add(add);
				}else if(i!=rowInfo.length-1){//不是最后一个json格式数据
					rowInfo[i]=rowInfo[i]+"}";
					Add add =  JSON.parseObject(rowInfo[i], Add.class);
					addList.add(add);
				}else{//最后一个json格式数据
					Add add =  JSON.parseObject(rowInfo[i], Add.class);
					addList.add(add);
				}
			}
		}else{//只有一个json数据
			String[] rowInfo=new String[1];
			rowInfo[0]=addResult.substring(1, addResult.length()-1);
			Add add =  JSON.parseObject(rowInfo[0], Add.class);
			addList.add(add);
		}
		
		//去重
		List<Add> addListFinl=new ArrayList<Add>();
		for (Add add : addList) {
			if(!addListFinl.contains(add)){  
				addListFinl.add(add);  
	        } 
		}

---

---

以下主要说明的是在easyUI的datagrid中，列的formatter 方法。以下formatter 的作用是当内容大于宽度，显示省略号的时候，鼠标移动到内容上会展示全部的内容。

{
			field : 'phone',
			title : '电话',
			width :'10%',
			align : 'center',
			resizable:false,
			formatter : function(value, row, index) {
				if(typeof(value) == 'undefined' || value == "" || value == null) {
					value = "";
				}
				return "<span  title='"+value+"'>"+value+"</span>";
			}
		}