javascript动态生成表格内容并设置属性,获取选中行的值

来源:互联网 发布:数控模拟编程软件 编辑:程序博客网 时间:2024/04/29 10:54

通过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 onclick='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.onclick="'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> 

原创粉丝点击