jquery动态创建表格

Posted 2020-09-14 lxjshuju

html代码

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

js代码

<script type="text/javascript">
var myObj = [{ "testname": "张三1111", "sex": "男","addr":"天津"},
			{ "testname": "张狗", "sex": "男","addr":"上海"},
			{ "testname": "张武", "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);"+" onmouseover="+"changecolor(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+"></td>");
		      td.appendTo(tr);
		   }
		}
		tr.appendTo(table);
		$("#mydiv").append("</table>");
	}

	//鼠标焦点移入时。查询匹配的数据，填充表格进行显示。
 
	function showMydiv(testname,sex,addr){
		
		var cells=arguments.length;//列数
		var rows=3;//行数
		createMyTable(3,cells);//第一个数值为行数,第二个数值为列数
		for(var i=1;i<rows+1;i++){
			for(var j=1;j<cells+1;j++){
				var tdid="#"+i+""+j;		
				$(tdid).html(myObj[i-1].testname);
				j=j+1;
				tdid="#"+i+""+j;
				$(tdid).html(myObj[i-1].sex);
				j=j+1;
				tdid="#"+i+""+j;
				$(tdid).html(myObj[i-1].addr);				
			}
		}
		document.getElementById("mydiv").style.display="block";
	}
	
	//变色 
	function changecolor(id){
		if(id=="1"){
			document.getElementById("1").style.background=‘#FFFF99‘;
			document.getElementById("2").style.background=‘‘;
			document.getElementById("3").style.background=‘‘;
		}else if(id=="2"){
			document.getElementById("1").style.background=‘‘;
			document.getElementById("2").style.background=‘#FFFF99‘;
			document.getElementById("3").style.background=‘‘;
		}else if(id=="3"){
			document.getElementById("1").style.background=‘‘;
			document.getElementById("2").style.background=‘‘;
			document.getElementById("3").style.background=‘#FFFF99‘;
		}
	}
	//双击某行时，把选中的数据输出 
	function selectRow(id){
		console.log(id);
		if(id=="1"){
			console.log(myObj[0]);
		}else if(id=="2"){
			console.log(myObj[1]);
		}else if(id=="3"){
			console.log(myObj[2]);
		}
	}
</script>

字符串格式 自己主动创建标格

//创建表格。

$scope.createMyTable = function (rowCount,cellCount){
	
	var table=‘<table id="‘+tableid+‘" ‘+‘ style="width:100%;height:auto; text-align:center;background:#eee;" border="1;" cellspacing="0">‘;
	var imgclose=‘<span style="right: -17px; top: -3px; z-index: 100001; position: absolute;"> <img  ng-click="closewin();" src="‘+BaseURL+‘libs/mhis_ui1.1.4/images/tableclose2.jpg" style="height: 18px"></span>‘;

	var tr="";
	for(var i=1;i<rowCount+1;i++){
		var rowid=tableuniqueflag+i;
		tr="<tr ng-click="+"selectRow("+i+");"+" ng-mouseover="+"changecolor("+i+");"+" id="+rowid+">";
		var td="";
		for(var j=1;j<cellCount+1;j++){
			var tdid=tableuniqueflag+i+""+j;
			td=td+"<td id="+tdid+" nowap ></td>";
		}
		tr=tr+td+"</tr>"
		table=table+tr;
	}
	table=table+"</table>"+imgclose;
	var compiletable=$compile(table)($scope);
	$(mydivlocation).html(‘‘).append(compiletable);
}