首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

表单元素创造、移除

2012-10-07 
表单元素创建、移除有时数据从后台动态取得后,显示在页面上,一下例子只针对IEtable aligncenter idli

表单元素创建、移除

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

?

热点排行