<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> </td>
<td> </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>
我得到的输出如下
单击删除后，我可以删除添加的元素，但是当我再次按下时，添加更多的 y 值保持不变，我想在下次单击添加时增加它应该显示属于类型 3 以及我们如何动态应用样式当我应用于超链接 Addmore 并删除时添加了元素。