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

1549年前javaScript3726

 

首先,使用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");
                    }
       }

 

 

 

 

 

标签: jsIT

相关文章

org.apache.subversion.javahl.ClientException: ¾ܾø·ÃÎʡ£ svn: Can't move 'E:\workspace\TourMarkets\.

org.apache.subversion.javahl.ClientException: ¾ܾø·ÃÎʡ£  svn: Can't move 'E:\workspace\T...

MyBatis如何实现 if-else 的逻辑效果及判断条件

场景需要,有时候某个字段不为空,一个查询条件,为空的时候,有另一个查询条件。需要ifelse的逻辑实现。在 MyBatis 的动态 SQL 中,虽然没有直接的 else 语句,但你...

com.highgo.jdbc.util.PSQLException: 错误: 操作符不是唯一的: integer = character varying(mybatis postgreSql)

com.highgo.jdbc.util.PSQLException: 错误: 操作符不是唯一的: integer = character varying(mybatis postgreSql)

postgresql抛出的异常,是因为数据库类型是int类型,而java传参String造成。有2种解决方案,建议第二种方案更方便简洁解决方案一:代码public int dele...

JS实现在json数组开头插入(拼接)一个元素

原生方法一:var arr=[1,2,3,4];item=10; arr.unshift(item) ;//arr输出[10, 1, 2, 3, 4]方法二:在数组 arr 开头添...

AI常见关键术语

AI(人工智能)领域涉及众多专业术语,以下是一些常见的关键术语及其解释:一、基础术语人工智能(AI):通过计算机程序或机器模拟人类智能的过程,包括视觉感知、语音识别、决策制定和语言翻译等能力。简而言之...

Linux系统GIT⼯具安装

Linux系统GIT⼯具安装

⽅式⼀:通过包管理器安装 在 Linux 上安装 Git 向来仅需⼀⾏命令即可搞定,因为各式各样的包管理器帮了我们⼤忙,所以对于 CentOS 系统来讲,直接执⾏如下命令即可安装:yum&n...

评论列表

点我收录您
2015-10-15 11:55:38

这个用途很广泛

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。