jquery动态创建表格

标签：jquery创建动态表格

html代码

<input name="myname" id="myinput" onfocus="showMydiv();">
<div id="mydiv" style="display:none;height:200px;width:196px;position:absolute;z-index:100;left:83px;top:40px;" >

js代码

<script type="text/javascript">
var myObj = [{ "name": "张三1111", "sex": "男","addr":"天津"},
			{ "name": "张狗", "sex": "男","addr":"上海"},
			{ "name": "张武", "sex": "男","addr":"北京"},
			];
	
	//鼠标焦点移入时，查询匹配的数据，填充表格进行显示。 
	function createMyTable(rowCount,cellCount){		
		table=$('<table style="width:100%;height:auto; text-align:center;background:#fff;" border="1;" cellspacing="0">');
		table.appendTo($("#mydiv"));
		for(var i=1;i<rowCount+1;i++)
		{
		   var tr=$("<tr onclick="+"selectRow(this.id);"+" id="+i+"></tr>");
		   tr.appendTo(table);
		   for(var j=1;j<cellCount+1;j++)
		   {
			  var tdid=i+""+j;
		      var td=$("<td id="+tdid+">"+tdid+"</td>");
		      td.appendTo(tr);
		   }
		}
		tr.appendTo(table);
		$("#mydiv").append("</table>");	
	}

	//鼠标焦点移入时，查询匹配的数据，填充表格进行显示。 
	function showMydiv(){
		createMyTable(3,3);		
		console.log(myObj[0].name);
		$("#11").html(myObj[0].name);	
		$("#12").html(myObj[0].sex);
		$("#13").html(myObj[0].addr);
		$("#21").html(myObj[1].name);
		$("#22").html(myObj[1].sex);
		$("#23").html(myObj[1].addr);
		$("#31").html(myObj[2].name);
		$("#32").html(myObj[2].sex);
		$("#33").html(myObj[2].addr);
		//document.getElementById("33").innerHTML = myObj[2].addr;
		
		document.getElementById("mydiv").style.display="block";
	}
	
	//双击某行时，把选中的数据输出 
	function selectRow(id){
		console.log(id);
		if(id="10"){
			console.log(myObj[1]);
		}else if(id="20"){
			console.log(myObj[2]);
		}else if(id="30"){
			console.log(myObj[3]);
		}
	}
</script>

jquery动态创建表格

标签：jquery创建动态表格

原文地址：http://blog.csdn.net/u010081710/article/details/46896261