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);

posted on 2008-08-04 21:19  Winlone囧  阅读(150)  评论(0编辑  收藏  举报

导航