2012-08-16 105 views
0
<html> 
<head> 
    <title>something</title> 
    <link rel="stylesheet" href="../../style/global.css"> 
     <link rel="stylesheet" href="../../style/local.css"> 
     <link rel="stylesheet" href="../../calendarControl.css"> 
     <script Language="JavaScript" src="../jscripts/util.js"></script> 
    <script language="JavaScript" src="../../calendarControl_modi.js"></script> 
    <style> 
    input.normal 
    { 
    text-transform:uppercase; 
    } 
    </style> 
    <script> 

    function addBox() 
    { 
     //y; 
     y=2; 
     alert(y); 
     var form=document.frm; 

     var _items = [ 'NA', 'Storage Device', 'Imaging Device']; 

     var label, textbox,lable2,select,div; 

     label = document.createElement('label'); 

     label.appendChild(document.createTextNode('Belonging Type '+y+ ':')); 

     select = document.createElement('select'); 

      for (var x = 0; x < _items.length; x++) 
      { 
      _option = document.createElement('option'); 
      var _text = document.createTextNode(_items[x]); 
      _option.appendChild(_text); 
      select.appendChild(_option); 
      _option.value = _items[x]; 
      } 

     label2 = document.createElement('label'); 

     label2.appendChild(document.createTextNode('Belonging '+y+ ':')); 

     textbox = document.createElement('input'); 
     textbox.type = 'text'; 

     label.appendChild(select); 
     label.appendChild(label2); 
     label.appendChild(textbox); 

     div=document.createElement('div'); 
     div.appendChild(label); 
     document.getElementById('frm').appendChild(div); 

     y=y+1; 
     alert(y); 


     } 

     function removeBox() 
     { 
     var form = document.frm; 
     if (form.lastChild.nodeName.toLowerCase() == 'div') 
     form.removeChild(form.lastChild); 

     } 

     function incrementCount() 
     { 
     document.frm.count.value = parseInt(document.frm.count.value) + 1; 
     addBox(); 
     } 

     function decCount() 
     { 
     document.frm.count.value = parseInt(document.frm.count.value) - 1; 
     removeBox(); 
     } 

    </script> 

</head> 

<body leftmargin="2" topmargin="2" marginwidth="2" marginheight="0" onload=""> 
<table border = "0" cellspacing="0" cellpadding="0" width = "100%"> 
      <tr> 
       <td class = "normal" align = "left" colspan = "100%" > 
        <!-- Put the Header Image over here--> 
       <!--<img src="../../images/ts.gif" width="10%" >--> 
       <td> 
      </tr> 
    </table> 
    <!--<img src="../../images/line.bmp" width="100%" height="2">--> 

    <form name = "frm" method = "post" action="" > 
    <table> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td><input type="hidden" name="count" value="0" readonly ></td></tr> 
    <tr> 
     <td><a href="javascript:incrementCount();" onclick="" class="underline_small">Add more</a></td> 
    </tr> 
    <tr> 
     <td><a class="underline_small" href="javascript:decCount();" onclick="">Remove<a></td> 
    </tr> 

</table> 
</form> 
</body> 
</html> 

我得到的输出是点击删除后如下如何添加和使用javascript

enter image description here

我能够删除删除的选项和文本框,标签和风格的选择框添加元素,但是当我再次按下时添加更多的y值仍然相同,我想增加下一次,当我将点击添加更多它应该显示属于类型3,我们如何应用样式动态添加元素,因为我适用于超链接Addmore和去掉。

回答

0

我觉得问题在于你已经设置了y = 2里面的addBox()函数。将其更改为 y=document.getElementsByName('count')[0].value;

演示:http://jsfiddle.net/pEAH8/