表单元素创造、移除

表单元素创建、移除

有时数据从后台动态取得后，显示在页面上，一下例子只针对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;
  }

表单元素创造、移除

相关推荐