首页 > 代码库 > jquery动态创建表格

jquery动态创建表格

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);"+" onm ouseover="+"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="http://www.mamicode.com/‘+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); }


技术分享

jquery动态创建表格