表单元素创建、移除
有时数据从后台动态取得后,显示在页面上,一下例子只针对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)//创建元素checkboxvar 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; }
?