Posted in Javascript onApril 08, 2013
首先,使用JS动态产生Checkbox可以采用如下类似的语句:
var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456');
但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用
document.createTextNode('XXX')
方法来产生一个文本节点,放在checkbox后面。
如下代码,程序产生了一个checkbox和一个文本节点,并将它们放到一个li对象中,再将li对象添加到ul对象中:
var executerDiv=$("executerDiv"); executerDiv.innerHTML=""; var ul=document.createElement("ul"); for(var i=0;i<tableDatas.length;i++){ var arr=tableDatas[i]; // 加入复选框 var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",arr[0]); checkBox.setAttribute("name", arr[1]); var li=document.createElement("li"); li.appendChild(checkBox); li.appendChild(document.createTextNode(arr[1])); ul.appendChild(li); } executerDiv.appendChild(ul);
以上代码中,将checkbox放到li和ul中,这样能起到良好的排列效果,UL和li设置的CSS样式如下:
#executerDiv{ } #executerDiv ul{ margin:0px; padding:0px; list-style-type:none; vertical-align:middle ; } #executerDiv li{ float:left; display:block; width:100px; height:20px; line-height:20px; font-size:14px; font-weight:bold; color:#666666; text-decoration:none; text-align:left; background:#ffffff; }
Js动态添加复选框Checkbox的实例方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@