js动态加载复选框checkbox(XML串)

 

首先,使用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方法:

    function drawCheckBox(oSelect, oNode, sValue, sText) {
 alert(oSelect);
 if (oSelect == null) {
  return -1;
 }
 if (oNode == null) {
  return -2;
 }
 if (sValue == null) {
  return -3;
 }
 if (sText == null) {
  return -4;
 }  
   //清空原有选项  
  
 oSelect.innerHTML="";
   //根据xml节点列表的内容构造下拉框选项  
 var childs = oNode.childNodes;
 var obj;
 var idx = -1;
    var ul=document.createElement("ul");
 for (var i = 0; i < childs.length; i++) {
  var child = childs.item(i);
  var value = child.selectSingleNode(sValue).text;
  var text = child.selectSingleNode(sText).text;
  alert('value=='+value);
  alert('text=='+text);
  obj = document.createElement("input");
  //obj.type="checkbox";  
  obj.setAttribute("type","checkbox");  
  obj.setAttribute("id",'box'+i);
  obj.setAttribute("name",'box');
  obj.value = value;
  obj.text = text;
  obj.title = text;
  oSelect.appendChild(obj);
  var li=document.createElement("li");
        li.appendChild(obj);       
        li.appendChild(document.createTextNode(text));
        ul.appendChild(li);  
 }
  oSelect.appendChild(ul);
 return 1;
}

 

HTML部分:

<tr>
    <td align="right" class="sec2">
     对应取票方式  </td>
    <td id="qpfs">
    </td>
   </tr>

 

js赋值部分:

else if(method =="getQpfs") {
             alert(http_text);
             var oNodeNsr = xmlDoc.getElementsByTagName("ROW");
        if(oNodeNsr!=null){
        //获得变更项目的数据岛
                      DSO_SJSWJG.removeChild(DSO_SJSWJG.documentElement);
                      DSO_SJSWJG.appendChild(xmlDoc.selectSingleNode("//ROWSET"));
                      drawCheckBox(document.getElementById('qpfs'), DSO_SJSWJG.selectSingleNode("/ROWSET"), "DM", "MC");
                    }
       }

 

 

 

 

 

本文由站长原创或收集,不代表本站立场,如若转载,请注明出处:http://www.swzhinan.com/post/36.html

共有 2 条评论

  1. avatar

    点我收录您

    这个用途很广泛

回复给

欢迎点评

联系我们

站长QQ:384827360

站长邮件:384827360@qq.com

工作时间:周一至周五,9:30-15:30,节假日休息

QR code