使用javascript绘制页面元素-->数据列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ssss</title>
<script>
/*
var widths=[
{id:'f1',width:100},{id:'f2',width:90},{id:'f3',width:50},
{id:'f4',width:50},{id:'f5',width:120},{id:'f6',width:200},{id:'f7',width:30},
{id:'f8',width:50},{id:'f9',width:50}
];
var nwd=[];
var fwd=widths;
var clientW=200;


for(var i=0;i<widths.length;){

 var wd = widths[i].width;
 var clnm=widths[i].id+",";
  for(var x=1;x<fwd.length;x++){
     wd+=fwd[x].width; 
  if(wd>clientW){
    nwd.push(fwd[x]);
    wd=wd-fwd[x].width;
  }else{
   clnm +=fwd[x].id+",";
  }
  }
  alert("ids:"+clnm+"-="+wd);
  fwd=nwd;
  widths=nwd;
  nwd=[];
}
*/
function displayv(dispId){
 
 var dispId = dispId.split(",");
 for(var i=0;i<dispId.length;i++){
    var id = dispId[i];
    var td = document.getElementById(id);
  var dsp = td.style.display;
   td.style.display="none";
  if(dsp=="none"){
   td.style.display="block";
  }
 
 }
}


</script>

</head>
<body>
<input type="button" οnclick="search();" value="查询" />
<div id="mainc"></div>
</body>
</html>
<script>
//displayv();

var header=[{sname:'A'},{sname:'B'},{sname:'C'},{sname:'D'}];
var config = {header:header};
initTable(config,header);

function initTable(config,divId){
var htable="<table border=1 cellpadding=0 cellspacing=0>";
var tr="<tr>";
var td="";
var header = config.header;

//表列名
for(var w=0;w<header.length;w++){
 var hid="xt"+w;
 var hdnm = header[w].sname;
 td+="<td id="+hid+">"+hdnm+"</td>";
}
//
 var dispId = "td0,td1,td2"
td+="<td><a href='javascript:displayv(\""+dispId+"\");'>更多</a></td>";
var theader=tr+td+"</tr>";

//数据列表框
var dataHtml="<tr><td colspan=4><div id='rsc'></div></td></tr>";

var wtable=htable+theader+dataHtml+"</table>";
var mct = document.getElementById("mainc");
mct.innerHTML=wtable;
}


//填充数据
function search(){
var mct = document.getElementById("rsc");
var ihtml="<table border=1 cellpadding=0 cellspacing=0>";
//数据列
for(var c=0;c<header.length;c++){
   var tdId="td"+c;
  ihtml+="<tr><td>a1</td><td>b1</td><td>c1</td><td id='"+tdId+"'>d1</td></tr>";
 
}
var edtable="</table>";
mct.innerHTML=ihtml+edtable;
}

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值