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