有时数据从后台动态取得后,显示在页面上,一下例子只针对IE
<table align="center" id="linkman" style="width:500px; display:none"></table>
?
一、增加:
该示例中的数据源是用dwr从后台获取,{['id','name'],['id','name']}。linkman是一个table对象,用div对象尝试未成功。table显示为三列。
function showLinkMan(){
bpmLinkmanAjax.getLinkman('${loginuser.id}',function (data){
if(data.length>0){
var linkman=document.all.linkman;//大容器
var tempCount=0;//控制一行三列的标识
var tr;
for(var i=0;i<data.length;i++){
var obj=data[i];
if(obj.length>0){
if(tempCount==0){
tr=null;
tr=document.createElement("tr");//创建行
tr.id="tr"+obj[0];//设定行ID
//将tr放入table中 注意:table中默认已经有一个节点 tbody了。
linkman.childNodes[0].appendChild(tr);
}
tempCount++;
var td=document.createElement("td");
tr.id="td"+obj[0];
tr.appendChild(td)
//创建元素checkbox
var ch=document.createElement("<input type='checkbox' id='ch"+obj[0]+"' value='"+obj[1]+"'>");
ch.attachEvent("onclick",checkUser);//为checkbox添加事件
td.appendChild(ch);
var txt=document.createElement("<input type='text' id='txt"+obj[0]+"' readOnly=true value=' "
+obj[1]+"' style='width: 70px;border:none;'>");
td.appendChild(txt);
var img=document.createElement("<a href='#' id='img"+obj[0]+
"' style='font-size: 9px;font-style: oblique;color: blue'>");
img.innerText="删除";
img.attachEvent("onclick",delUser);
td.appendChild(img);
//此处更改tempCount 决定 table显示的列数(3列)
if(tempCount==3){
tempCount=0;
}
}
}
linkman.style.display="";
}
});
}
?
二、移除:该td将被移除
function delUser(evt){
var img=evt.srcElement;
img.parentNode.parentNode.removeChild(img.parentNode);
}
?
三、-------创建下拉框选项
var op0= document.createElement("option");
op0.text="请选择!"
//ssbuyorder 为一下拉框
if(document.getElementById("ssbuyorder")!=null){
document.getElementById("ssbuyorder").add(op0,0);
document.getElementById("ssbuyorder").selectedIndex=0;
}
?