批量添加表单项示例-优快云博客

本文介绍了一个使用JavaScript实现的动态表格案例，该案例允许用户通过点击按钮来增加新的输入行，每一行包括显示值与实际值两个字段，并提供了一个提交按钮用于验证这些值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这些天来了一些批量添加显示值与实际值的需求，当然还有一些难以描述的地方需要处理，但是这个大概先写在这里

<html>
<head>
<title></title>
</head>
<script>
function addRow(){
    //复制上一行添加到下一行
    document.all.tab1.appendChild(document.all.tab1.lastChild.cloneNode(true));
    var showValues1=document.getElementsByName("showValues");
    var realyValues1=document.getElementsByName("realyValues");
    (document.getElementsByName("showValues"))[showValues1.length-1].value="";
    (document.getElementsByName("realyValues"))[realyValues1.length-1].value="";
}

function submitForm(){
    var showValues=document.getElementsByName("showValues");//获得显示值数组
    var realyValues=document.getElementsByName("realyValues");//获得实际值数组
    for(var i=0;i<showValues.length;i++){
       alert(showValues[i].value+","+realyValues[i].value);//弹出显示值跟实际值
    }
}
</script>
<body>
<form method="post">
<input type="button" value="新增" onclick="addRow();">
<table id="tab1" border="1">
   <tr>
     <td>显示值<input type="text" id="showValues" /></td>
<td>实际值<input type="text" id="realyValues"/></td>
   </tr>
</table>
<input type="button" onclick="submitForm();" value="提交数据"/>
</form>
</body>
</html>

tanlinqing

批量添加值需求