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

最新推荐文章于 2022-09-29 09:58:04 发布

zuowei521

最新推荐文章于 2022-09-29 09:58:04 发布

阅读量2.7k

点赞数

文章标签： javascript stylesheet function border table class

本文链接：https://blog.csdn.net/zuowei521/article/details/1764141

版权

通过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()">

</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>

zuowei521

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript动态生成表格内容并设置属性，获取选中行的值

通过javascript 动态生成表格内容 test.asp用户维护用户名称手机号码--> 性别用户类型如何动态生成表格呢见下面内容：var xPK, uName;clearData();SetData();var clicktablerownum=0;//晴空表格内容function clearData(){ for(
复制链接

扫一扫