前端遍历表单中动态添加删除的表格获取select和input的值并合成对象加到数组中，不使用vue

<think>嗯，用户想了解如何在前端遍历动态添加和删除的表格，获取里面的select和input的值，然后合成对象并添加到数组中，而且不使用Vue。首先，我需要理解用户的需求。他们可能正在使用纯JavaScript或者jQuery这样的库，但根据问题描述，应该是指纯JS的实现。 首先，动态添加和删除表格行，这部分需要给添加按钮绑定事件，动态创建tr，里面包含select和input，还有删除按钮。删除按钮需要能移除对应的行。然后，当用户填写完数据后，需要遍历所有行，提取每个select和input的值，组合成对象，存入数组。 接下来，要考虑如何给动态添加的元素绑定事件。因为删除按钮是动态生成的，所以可能需要事件委托，将事件绑定到父元素，比如tbody，这样新添加的按钮也能触发删除事件。 然后是获取值的部分。每个tr里的select和input需要被正确选中。可能给每个输入元素设置类名或者data属性，方便查找。比如，每个select可能有类名“select-field”，input有类名“input-field”。然后在遍历的时候，对每一行，用querySelector获取当前行的select和input的值。 需要注意，动态添加的行可能没有固定的ID，所以通过类名或相对定位来查找元素比较可靠。比如，在每一行内查找对应的元素，避免全局查找导致错误。 还有，合成对象的时候，要确保每个字段的名称正确，比如select的值对应某个属性，input对应另一个。用户可能需要将这些值组合成一个对象，比如{ type: selectValue, name: inputValue }，然后push到数组中。 另外，表单验证可能也是需要考虑的，比如检查输入是否为空，或者select是否有选中的值，但用户没有提到这部分，可能暂时不需要处理。 测试的时候，可能会出现的问题包括：事件绑定失效，因为动态元素没有正确绑定；获取值时选错了元素，比如用了全局的querySelector而不是当前行的；或者数组没有正确累积，每次都是覆盖而不是追加。 总结步骤应该是：1. 实现动态添加行，包含删除功能；2. 遍历所有行，提取数据；3. 组合成对象并添加到数组。代码结构方面，用事件监听器处理添加和删除，用函数封装数据收集的过程，最后在需要的时候调用收集函数。</think>好的，我来为您分步骤讲解如何用纯JavaScript实现这个功能： 一、HTML结构示例 ```html <table id="dynamicTable"> <thead> <tr> <th>类型</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody id="tableBody"> <!-- 动态行将插入这里 --> </tbody> </table> <button onclick="addRow()">添加行</button> <button onclick="collectData()">收集数据</button> ``` 二、JavaScript实现步骤 1. 动态添加行功能 ```javascript let rowCount = 0; function addRow() { const tbody = document.getElementById('tableBody'); const tr = document.createElement('tr'); tr.innerHTML = ` <td> <select class="form-type"> <option value="type1">类型1</option> <option value="type2">类型2</option> </select> </td> <td> <input type="text" class="form-name"> </td> <td> <button onclick="deleteRow(event)">删除</button> </td> `; tbody.appendChild(tr); rowCount++; } ``` 2. 删除行功能（使用事件委托） ```javascript function deleteRow(event) { const btn = event.target; const tr = btn.closest('tr'); tr.remove(); rowCount--; } ``` 3. 数据收集功能 ```javascript const dataArray = []; function collectData() { const rows = document.querySelectorAll('#tableBody tr'); rows.forEach(row => { const type = row.querySelector('.form-type').value; const name = row.querySelector('.form-name').value.trim(); if (name) { // 简单验证输入 dataArray.push({ type: type, name: name }); } }); console.log('当前数据数组:', dataArray); // 这里可以添加提交逻辑 } ``` 三、关键点说明 1. **动态绑定**： - 使用`onclick`直接绑定删除事件 - 通过`closest()`方法定位父级tr元素 - 使用CSS类选择器（`.form-type`, `.form-name`）定位元素 2. **数据收集**： - `querySelectorAll`获取所有动态添加的行 - 遍历时在每行内查找对应元素值 - 建议的验证逻辑（示例中仅验证了输入框非空） 3. **性能优化**： - 避免频繁操作DOM，最后统一处理数据 - 使用事件委托处理动态元素的事件 - 使用`trim()`处理输入值避免空白字符 四、扩展建议 1. **唯一标识**： ```javascript // 在addRow()中添加 tr.dataset.rowId = `row-${Date.now()}`; ``` 2. **数据更新**： ```javascript function updateDataArray() { dataArray.length = 0; // 清空数组 collectData(); // 重新收集 } ``` 3. **输入验证增强**： ```javascript function validateInput(name) { return name.length >= 2 && name.length <= 20; } ``` 这个实现方案完整展示了动态表格的增删查功能，通过组合使用DOM操作和数组操作，可以满足基本需求。实际使用时可以根据具体业务需求添加更多字段和验证逻辑。