zoukankan      html  css  js  c++  java
  • js 动态创建HTML元素

    下面是要求:

    <!-- 进入页面的时候,只有一个框,是整个大的题目,然后底下是一个下拉菜单,是选择这个题目有几个小题,选择完后就出现几个框是小题的内容框,然后在每个小题的下面还有一个下拉是选择有几个选项的--> 

    代码:




    <textarea cols="60" rows="12"></textarea> 
    <br/>
    选择答题数目:
    <select  name="select1" id="select1" onchange="change1(this);">
    <option value=0>请选择</option>
    <script>
    for(var i=1;i<=10;i++)...{
    document.write(
    "<option value="+i+">"+i+"</option>");
    }

    </script>
    </select>
    <table id="tbl">
    <tbody id="Obj1" name="Obj1">

    </tbody>
    </table>
    <script>
    function change1(obj)...{
     
    if(obj.value==0)...{
        alert(
    "请至少选择一项");return;
     }

     
    var tbl=document.getElementByIdx("tbl");//得到table
     var tbo=document.getElementByIdx("Obj1");//得到table下的tbody
     tbl.removeChild(tbo);//删除table下的tbody元素
     var tbody=document.createElement("tbody");//重新创建一个 tbody
     tbody.setAttribute("id","Obj1");
     tbl.appendChild(tbody);
    //把tbody给table
     for(var i=0;i<obj.value;i++)...{//根据所选数,得到文本数目
        var row=document.createElement("tr");
        row.setAttribute(
    "id","tr["+i+"]");
        
    var cell=document.createElement("td");
        
    var cell1=document.createElement("td");
        
    var cell2=document.createElement("td");
        
    var cell3=document.createElement("td");
        
    var sele=document.createElement("select");
        
    var radio1=document.createElement("input");
        
    var radio2=document.createElement("input");
        radio1.setAttribute(
    "type","radio");
        radio2.setAttribute(
    "type","radio");
        radio1.setAttribute(
    "name","isMul");
        radio1.setAttribute(
    "value","single");
        radio2.setAttribute(
    "name","isMul");
        radio2.setAttribute(
    "value","poly");
        sele.setAttribute(
    "name","selectobj");  
        
    for(var j=0;j<=10;j++)...{//循环得到OPTION
            var opt=document.createElement("option");
            
    var opttxt=document.createTextNode(j);
            opt.setAttribute(
    "value",j);
            opt.text
    =j;//给OPTION赋值
            sele.appendChild(opt);
        }

        
    var textnode=document.createTextNode("请输入内容: ");
        
    var textnode1=document.createTextNode("选项数目: ");
        
    var textnode2=document.createTextNode("选项类型: ");
        
    var textnode3=document.createTextNode("单选: ");
        
    var textnode4=document.createTextNode("多选: ");
        cell2.appendChild(textnode1);
        cell2.appendChild(sele);
        cell1.appendChild(textnode);
        cell3.appendChild(textnode2);
        cell3.appendChild(radio1);
        cell3.appendChild(textnode3);
        cell3.appendChild(radio2);
        cell3.appendChild(textnode4);
        
    var txt=document.createElement("input");
        txt.setAttribute(
    "type","text");
        txt.setAttribute(
    "id","txt["+i+"]");
        txt.setAttribute(
    "name","txt["+i+"]");
        cell.appendChild(txt);
        row.appendChild(cell1);row.appendChild(cell);row.appendChild(cell2);
  • 相关阅读:
    poj 1328 Radar Installation (贪心)
    hdu 2037 今年暑假不AC (贪心)
    poj 2965 The Pilots Brothers' refrigerator (dfs)
    poj 1753 Flip Game (dfs)
    hdu 2838 Cow Sorting (树状数组)
    hdu 1058 Humble Numbers (DP)
    hdu 1069 Monkey and Banana (DP)
    hdu 1087 Super Jumping! Jumping! Jumping! (DP)
    必须知道的.NET FrameWork
    使用记事本+CSC编译程序
  • 原文地址:https://www.cnblogs.com/winlone/p/13670354.html
Copyright © 2011-2022 走看看