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);
  • 相关阅读:
    mysql用户密码修改
    Java List java.lang.UnsupportedOperationException
    python __dict__
    pytest.fixture
    Python __metaclass__ 解释
    Python __new__()方法,为对象分配内存 返回对象的引用
    git 常用操作
    boto3 dynamodb 一些简单操作
    conda, pip, virtualenv 区别
    list去重后不改变排序
  • 原文地址:https://www.cnblogs.com/winlone/p/13670354.html
Copyright © 2011-2022 走看看