用javascript生成DOM树.(表格手动增加)

这是我第一次在CSDN上写关于技术方面的东东,拿来献献丑.

最近在做动态菜单菜单的管理,功能要求:每一个主菜单下面可以有多个子菜单,所有的菜单信息都已录入数据库.现在需要将数据从DB中提出,实现动态分组,四处搜索找到的资料总是和自己的实际的情况不符,用javascript创建DOM树.可以实现对DOM的树的任意结点进行操作,

/
  ///动态增加行
  function addRow(){
  //alert("222222")
  var table=document.getElementById("sublist")
  var tbody=document.createElement("tbody")
   var tr=document.createElement("tr");// 创建行对象
       for(var i=0;i<4;i++){
       if(i==0){ //设置第一个单元格中的checkbox
       var td=document.createElement("td");
       var input=document.createElement("input");//创建input元素对象
      // var attr=document.createAttribute("type");//创建一个type属性对象
     // var name=document.createAttribute("name");//创建name属性
       // 设置input属性
      // input.setAttribute("type","checkbox");
       //input.setAttribute("name","checkbox");
       //input.setAttribute("value","checkbox");
       // input.setAttribute(attr);
       // input.setAttribute(name);
       //input.type="checkbox";
    input.setAttribute("type","checkbox");
    input.setAttribute("name","checkbox");
    input.setAttribute("value","checkbox");
       //input.name="checkbox";
       //input.nodeValue="checkbox";
       td.appendChild(input);
       tr.appendChild(td);
    
       }
       else if(i==3){ //设置最后列一个单元格
        var td=document.createElement("td");
       //var attr=document.createAttribute("type");
      // var name=document.createAttribute("name");
       var value=document.forms(0).elements("pgproupNo").value //取菜单组号
       var txtValue=document.createTextNode(value);// 创建文本结点 
     
       td.appendChild(txtValue);
       tr.appendChild(td);
      
       }
       else if(i==2){//菜单列表信息提取
       var td=document.createElement("td");
       var select=document.createElement("select");
       select.setAttribute("name","submenuNm");
       //var attr=document.createAttribute("type");
      // var name=document.createAttribute("name");
       //input.type="text";
       //input.name="submenuId";
       //input.value=""
       //alert("00000");
       <%
       ArrayList subList = (ArrayList)(request.getSession().getAttribute("subList"));
       Iterator iterator=(Iterator)subList.iterator();
       while(iterator.hasNext()){
        SubProgram subpg = (SubProgram)iterator.next();
       
     
      
       %>
  
    var option = document.createElement("option");
    option.setAttribute("value","<%=subpg.getProgramCd()%>");
    var textNode = document.createTextNode("<%=subpg.getProgramName()%>");
    option.appendChild(textNode);
    select.appendChild(option);
    <%
    }
    %>
    //select.setAttribute("onchange","valueChange();");
     
       td.appendChild(select);
       tr.appendChild(td);
       }else{
       {
       var td=document.createElement("td");
       var input=document.createElement("input");
       //var attr=document.createAttribute("type");
      // var name=document.createAttribute("name");
       //input.type="text";
       //input.name="submenuId";
       //input.value=""
    input.setAttribute("type","text");
    input.setAttribute("name","submenuId");
    input.setAttribute("value","");
    input.setAttribute("onchange","valueChange();");
     
       td.appendChild(input);
       tr.appendChild(td);
       }
       }
      
      
       }
      // alert("00000");
     table.appendChild(tbody);
        tbody.appendChild(tr);
    //table.appendChild(tr);
        
  }
  ///
  /删除最后一行方法
  function deleteRow(){
 var table=document.getElementById("sublist");
 var tbody=table.getElementsByTagName("tbody").item(table.getElementsByTagName("tbody").length-1) ;
 var nodetr=tbody.firstChild ;
 var lasttr=tbody.removeChild(nodetr);
 
 
  }
  //
 / 对方法创建树形结构的理解:全部元素都是table的子元素或子孙元素,原来已有的tr和新建的tbody元素形成兄弟结点关系
  function getTableList(){
  var tab=document.getElementById("sublist");//获取提表格引用
  var tbodylist=tab.childNodes;//获取对象集合(其中原已存在的tr和新建的tbody并列)
  //var trlist=tab.getElementByTagName("tr");//获取行对象集合
  //alert(trlist.length);
  //alert(tbodylist.length);
  for(var i=1;i<tbodylist.length;i++){  //只取table下抽的tbody元素,因此从1开发遍历
   var trnode=tbodylist.item(i).childNodes.item(0);//每一个tbody只有一个tr孩子元素,因而用item(0)
   //alert(trlist.length);
   //alert(trlist.length);
   var tdlist=trnode.childNodes;//取得tr下面的所有孩子结点td,返回一个tdlist
   //alert(tdlist.length);
    for(var j=1;j<tdlist.length-1;j++){ //略去每一行中的第一列和最后一列,因而从1开始遍历,到length-1结束
      var tdcell=tdlist.item(j);
   var inputNode=tdcell.childNodes.item(0);//取得input元素
   //var valuetr=txt.getAttribute("value");// 取得input元素的value属性值
  //document.getElementById("1")appendChild("1111111111111111");//
  //inputNode.value=j;
  alert(inputNode.getAttribute("value"));
     
    }
   }
 
  }

 

页面代码:

html:

 <table width="1014" border="1">
      <tr>
        <td width="158">菜单组号(*)</td>
        <td width="468"><label>
        <html:text property="pgproupNo"/>
        </label></td>
        <td width="366" rowspan="2">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label>
          <input type="button" name="read" value="读取" style="width:120px;height:40px" id="read" οnclick="queryCommit();" />
        </label>
        </td>
      </tr>
      <tr>
        <td>主菜单名</td>
        <td><label>
       <html:text property="mainpgName"/>
        </label></td>
       
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label>
          <input type="button" name="button" value="行增加" id="addrow" " οnclick="addRow();" />
        </label>
          <label>
          <input type="button" name="button" value="行删除" id="deleterow"  οnclick="deleteRow();" />
          </label></td>
      </tr>
    </table>

创建的DOM树如下