### JavaScript 实现输入多行动态输入
在网页开发过程中，特别是在使用JSP处理用户输入时，经常需要收集用户的多行输入。本篇文章将基于提供的标题、描述和部分内容，详细阐述如何利用JavaScript实现输入多行动态输入，并通过示例代码帮助读者更好地理解整个过程。
#### 一、问题背景
在Web应用开发中，特别是使用Java Servlet和JSP技术栈时，通常会遇到一个常见需求：收集用户在表单中输入的多行数据。这在实际场景中非常实用，比如用户需要填写多条商品信息或记录多项任务详情等。在传统的静态HTML表单中，我们可以通过`request.getParameter()`方法获取单一表单元素的值。但对于动态生成的多行表单，则需要采取不同的策略。
#### 二、传统方式与局限性
1. **单个输入元素获取**：
- 使用`request.getParameter("value")`可以获取单个表单元素的值。
- 需要检查获取的值是否为空或包含特殊字符。
2. **多个相同名称的输入元素获取**：
- 使用`Enumeration paramNames=request.getParameterNames()`来枚举所有表单元素的名称。
- 使用`String paramName=(String)paramNames.nextElement()`获取下一个表单元素名称。
3. **问题**：
- 如果每新增一行，其名称与上一行相同，那么如何区分这些输入的值呢？
- 例如，在动态添加的文本框中，如果每个文本框的名称都是“name”，那么在服务器端如何知道每个文本框对应的值呢？
#### 三、解决方案
为了解决上述问题，我们可以使用JavaScript动态生成表单元素，并为每个元素分配唯一的名称。这样，当用户提交表单后，服务器端可以通过`getParameterValues()`方法来获取一组具有相同名称的值。
##### HTML + JavaScript 实现：
1. **HTML部分**：
- 创建一个包含动态生成行的表格。
- 每行包括几个文本输入框，用于输入数据。
2. **JavaScript部分**：
- 定义函数`tbladdrow()`，用于向表格中添加新行。
- 每行中的每个输入框都有唯一ID和名称。
- 示例代码片段：
```javascript
function tbladdrow() {
var i = lines.rows.length;
var row = Table1.insertRow(Table1.rows.length);
var col = row.insertCell(0);
col.innerHTML = "<INPUT id='line[" + i + "][name1]' name='line" + i + "name1' SIZE='10'>";
// ... 同理插入其他单元格
}
```
3. **服务器端处理**：
- 使用`getParameterValues()`获取所有相同名称的值：
```java
String[] values = request.getParameterValues("line1name1");
```
- 通过索引遍历数组，获取每个输入框的值。
#### 四、具体实现细节
1. **HTML页面结构**：
- 页面中定义了一个表格`Table1`，用于存放动态生成的数据行。
- 使用`align=center`等属性进行简单的布局设置。
2. **JavaScript动态添加行**：
- `tbladdrow()`函数根据当前行数生成新的行，并插入到表格中。
- 使用循环`for (i=1; i<=items; i++)`批量添加多行。
- 提供删除行的功能`delrow()`。
3. **服务器端处理**：
- 在JSP或Servlet中，通过`getParameterValues()`方法获取具有相同名称的一组值。
- 例如，对于名为`line1name1`的输入框组，可以这样获取值：
```java
String[] line1Name1Values = request.getParameterValues("line1name1");
for (String value : line1Name1Values) {
System.out.println(value);
}
```
#### 五、总结
本文详细介绍了如何使用JavaScript实现输入多行动态输入的方法，包括前端页面的动态生成以及后端对这些动态数据的处理。这种方式不仅提高了用户体验，还极大地简化了开发人员的工作量。通过上述步骤，您可以轻松地在自己的项目中实现类似功能，提高应用程序的灵活性和交互性。
