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);
  • 相关阅读:
    数据结构第四篇——线性表的链式存储之双向链表
    基本概念之引用赋值需要注意什么?
    基本概念之将引用作为函数的参数有哪些特点?
    基本概念之什么是引用?
    基本概念之模板类有什么优势?
    我的第一篇博文
    为CentOS 6 配置本地YUM源
    为CentOS 6 配置本地YUM源
    poj 1990 MooFest
    [置顶] 学生信息管理系统“重复设置”问题
  • 原文地址:https://www.cnblogs.com/winlone/p/13670354.html
Copyright © 2011-2022 走看看