通过javascript 动态生成表格内容 test.asp
<HTML>
<HEAD>
<TITLE>用户维护</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link href="../css/global.css" rel="stylesheet" type="text/css">
<script LANGUAGE="JScript.Encode" src="../appshell/remoteObject.js"></script>
</HEAD>
<BODY leftMargin=0 topMargin=0 onLoad="loadData()">
<TABLE id="maintbl" width="100%" border=1 οnclick='GetSelectRow()' >
<TR vAlign=center align=middle class=MTGridTitle>
<TD >用户名称</TD>
<!--<TD >手机号码</TD>-->
<TD >性别</TD>
<TD >用户类型</TD>
</TR>
</TABLE>
</BODY>
</HTML>
如何动态生成表格呢 见下面内容:
<SCRIPT language="javascript">
var xPK, uName;
clearData();
SetData();
var clicktablerownum=0;
//晴空表格内容
function clearData(){
for(var i=window.maintbl.rows.length;i>1;i--){
window.maintbl.deleteRow(i-1);
}
}
//为表格添加内容
function SetData(){
for(var i=0;i<10;i++){
var newTR=window.maintbl.insertRow();
newTR.className="MTGridText";
newTR.setAttribute('attrPK',i); //设置key
newTR.setAttribute('attrName',"test"+i); //设置name
//newTR.οnclick="'clicktablerow(this)'";
//每行生成4列数据
for (j=1;j<4;j++){
var newTD=newTR.insertCell();
newTD.innerText="test"+j;
newTD.noWrap=true;
//alert(newTD.outerHTML);
}
}
}
//获取用户选择的行的内容
function GetSelectRow(){
if(window.event.srcElement.tagName!="TD") return; //判断选中的标签的名称
var currentRowIndex=window.event.srcElement.parentElement.rowIndex //获取当前选中的行的索引
if (currentRowIndex==0) return;
var thistable=window.event.srcElement.parentElement;
//alert(thistable.outerHTML);
//获取主键
xPK = thistable.getAttribute('attrPK');
uName=thistable.getAttribute('attrName');
//alert(xPK);
thistable.style.backgroundColor='#d0d0d0';
if (clicktablerownum!=0 && clicktablerownum!=thistable){
clicktablerownum.style.backgroundColor='#f0f0f0';
}
clicktablerownum=thistable;
alert("xPK="+xPK+";uName="+uName);
}
</script>