js动态增加一组输入框

75 阅读 0 评论 50 点赞

我是靠谱客的博主顺利身影，最近开发中收集的这篇文章主要介绍js动态增加一组输入框，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<html>
<head>
<script type="text/javascript">
var index;
index = 2;

//新增一条参数信息
function addParamConf(){
s1 = "<input name='paramName"+index+"' class='style1' id='paramName"+index+"' dataType='Require' msg='参数名称不允许为空' type='text' style='width:100%' value=''>";
s2 = "<input name='paramValue"+index+"' class='style1' id='paramValue"+index+"' dataType='Require' msg='参数值不允许为空' type='text' style='width:100%' value=''>";
s3 = "<input name='description"+index+"' class='style1' id='description"+index+"' type='text' style='width:100%' value=''>";
s4 = "<a href=javascript:deleteParamConf('"+index+"')>删除</a>";
arow = ParamConf.insertRow();
arow.id="ParamConf"+index;
c1 = arow.insertCell();
c1.align="center";
c1.className='td_rb';
c1.innerHTML=s1;

c2 = arow.insertCell();
c2.align="center";
c2.className='td_rb';
c2.innerHTML=s2;

c3 = arow.insertCell();
c3.align="center";
c3.className='td_rb';
c3.innerHTML=s3;

c4 = arow.insertCell();
c4.align="center";
c4.className='td_rb';
c4.innerHTML=s4;

index = index+1;
//window_resize();
//initWindow(true);
}
//删除行
function deleteParamConf(index){
if(window.confirm('确定要删除这条记录吗?')){
ParamConf.deleteRow(document.getElementById("ParamConf"+index).rowIndex);
this.index = this.index - 1;
}
}
</script>

<title>147</title>
</head>
<body>
<table id="ParamConf" name="ParamConf" align="center" width="100%" border="1" style="border-collapse:collapse" bordercolor="#99CCFF" class="style1">
<form name="mobileParamForm" method="post" action="">
<tr align="center">
<td width="25%">id</td>
<td width="25%">名称</td>
<td width="40%">职务</td>
<td width="10%"><a href="javascript:addParamConf();">增加</a></td>
</tr>

<tr id="ParamConf1">
<td><input name="paramName1" class='style1' id="paramName1" type="text" style="width:100%"></td>
<td><input name="paramValue1" class='style1' id="paramValue1" type="text" style="width:100%"></td>
<td><input name="description1" class='style1' id="description1" type="text" style="width:100%"></td>
<td align="center"><a href=javascript:deleteParamConf('1')>删除</a></td>
</tr>
</form>
</table>
</body>
</html>