LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

js基础:js 动态创建HTML元素

admin
2010年8月18日 11:48 本文热度 3603

今天有个朋友要帮她完成一个小小的效果,发了点时间做了下,也不知道能不能达到要求,先帖了上来,下面是要求:


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


代码:


<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.getElementById("tbl");//得到table
 var tbo=document.getElementById("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);
    row.appendChild(cell3);
    tbody.appendChild(row);
 }
}
</script>


刚才在论坛上看到一个问题,顺便答了,和这个有点关系,也帖出来了。
如何通过点击"改变"按钮,给“显示”按钮添加onclick事件?使得点击“显示”按钮也能弹出对话框?
<table>
<tr>
<td> <input   type="button"   name="btn1"   value="改变"   onclick="fff()"   id="bbb"> </td>
</tr>
<tr>
<td> <input   type="button"   name="btn2"   value="显示"     id="btn2"> </td>
</tr>
<tr>
<td> <input   type="button"   name="bsrcxbtn"   value="查询"   onclick="Foo(''11'')"> </td>
</tr>
</table>
<script>
function   fff(){
 var   obj=document.getElementById("btn2");
 obj.setAttribute("onclick","show()");
}
function show(){
alert(''ss'');
}
</script>


该文章在 2010/8/18 11:48:48 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved