1. 爱易网页
  2. JavaSript
  3. javascript动态增加行的异常 （有关问题比较经典）

javascript动态增加行的异常 （有关问题比较经典）

日期：2014-05-16　 浏览次数：20625 次

javascript动态增加行的错误 （问题比较经典）
<html>  
<head>  
<title>动态添加html元素</title>  
<script type="text/javascript">  
<!--  
var textNumber = 1;  
function addCheckDetail(form,afterElement){  
    textNumber++;  
    //创建列表标签  
    var label2=document.createElement("label");  
    label2.appendChild(document.createTextNode("问题所属方面："));  
    var select=document.createElement("select");   
    select.setAttribute("select","select"+textNumber);  
    select.setAttribute("size","1");  
    select.setAttribute("id","select"+textNumber);  
    var option1=document.createElement("option");  
    option1.setAttribute("value","1");  
    option1.appendChild(document.createTextNode("方面一"));  
    var option2=document.createElement("option");  
    option2.setAttribute("value","2");  
    option2.appendChild(document.createTextNode("方面二"));      
    label2.appendChild(select);  
    select.appendChild(option1);  
    select.appendChild(option2);  
    form.insertBefore(label2,afterElement);  
      
    // 创建文本标签  
    var label1 = document.createElement("label");  
    // 创建文本框  
    var textField = document.createElement("textarea");  
    textField.setAttribute("name","txt"+textNumber);  
    textField.setAttribute("cols",80);  
    textField.setAttribute("rows",3);  
    textField.setAttribute("id","txt"+textNumber);  
    // 增加标签文本注释  
    label1.appendChild(document.createTextNode("问题描述"+textNumber+":"));  
    // 把textField放入标签中  
    label1.appendChild(textField);  
    // 把所有的这些增加到form中  
    form.insertBefore(label1,afterElement);  
}  
function removeCheckDetail(form,afterElement){  
    // 假如有文本框个数超过一个  
    if (textNumber > 1) {   
        // 删除最后一个添加的文本框  
        form.removeChild(document.getElementById("select"+textNumber).parentNode);  
        form.removeChild(document.getElementById("txt"+textNumber).parentNode);  
        textNumber--;  
    }  
}  
//-->  
</script>  
<style type="text/css">  
<!--  
label {  
  display:block;  
  margin:.25em 0em;  
}  
-->  
</style>  
</head>  
<body>  
<form id="myForm" method="get" action="./" /> 
<table><tbody>  
        <label>问题所属方面：

相关资料更多>

  1. 影响JSF领航
  2. ajaxSubmit,json,struts2,提醒保存“json返回值”
  3. extjs调用dwr回到的json数据
  4. 哪位高手会JS 帮个忙
  5. 在jsp中怎么实现背景图片的大小随浏览器窗口大小而改变
  6. javascript DOM操作的有关问题，
  7. javascript判空、获取cookie、json变换obj
  8. JavaScript高级程序设计 学习札记
  9. 关于用JS兑现三联动，高手快进来啊 ，