如何获取动态生成的pprice、pweight、pname值并存入数组？

DevOps 小满

2026-7-6

解决动态生成输入框的值存入数组的问题

方法一：批量遍历表格行收集数据

无需复杂监听，在需要获取数据的时机（如提交操作），直接遍历表格内的有效行，提取输入框值即可。可通过输入框在行内的位置或统一类名定位元素，无需依赖动态生成的ID。

实现代码：

// 新增获取所有产品数据的函数
function getAllProductData() {
  const productList = [];
  // 筛选所有产品行，排除添加按钮行
  const rows = tbody.querySelectorAll('tr:not(.addBtn)');
  
  rows.forEach(row => {
    // 通过列位置定位输入框
    const nameInput = row.querySelector('td:nth-child(1) input');
    const weightInput = row.querySelector('td:nth-child(2) input');
    const priceInput = row.querySelector('td:nth-child(3) input');
    
    // 可选：过滤空值条目
    if (nameInput.value.trim() || weightInput.value.trim() || priceInput.value) {
      productList.push({
        pname: nameInput.value.trim(),
        pweight: weightInput.value.trim(),
        pprice: parseFloat(priceInput.value) || 0
      });
    }
  });
  
  return productList;
}

// 示例：点击提交按钮时获取数据
// document.querySelector('#submitBtn').addEventListener('click', () => {
//   const data = getAllProductData();
//   console.log('收集到的产品数据：', data);
// });

说明：

用tr:not(.addBtn)精准筛选产品行，避免误选操作按钮行
依赖DOM结构定位输入框，无需维护动态ID，代码更稳定
可根据业务需求添加空值过滤逻辑，确保数据有效性

方法二：实时同步输入值到数组

如果需要实时维护数据数组（输入框内容变化时立即更新），可在创建输入框时绑定input事件，实时同步数据到数组。

修正后的完整代码：

let tbody = document.querySelector('#tbody');
let addBtn = document.querySelector('#addBtn');
let IdString = "tablerow";
let i = 4;
// 全局数组存储产品数据
const productData = [];

function creatTableEl(id, index) {
  const createTR = document.createElement("tr");
  createTR.setAttribute("id", id);
  
  // 创建输入框
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  const weightInput = document.createElement("input");
  weightInput.type = "text";
  const priceInput = document.createElement("input");
  priceInput.type = "number";
  
  // 组装表格行
  const createTD1 = document.createElement("td");
  const createTD2 = document.createElement("td");
  const createTD3 = document.createElement("td");
  const createTD4 = document.createElement("td");
  
  createTD1.appendChild(nameInput);
  createTD2.appendChild(weightInput);
  createTD3.appendChild(priceInput);
  createTD2.appendChild(weightInput);
  createTD3.appendChild(priceInput);
  createTD4.className = "Delete";
  createTD4.innerHTML = "&#10006";
  
  createTR.append(createTD1, createTD2, createTD3, createTD4);
  
  // 绑定输入实时更新事件
  nameInput.addEventListener('input', () => {
    productData[index].pname = nameInput.value.trim();
  });
  weightInput.addEventListener('input', () => {
    productData[index].pweight = weightInput.value.trim();
  });
  priceInput.addEventListener('input', () => {
    productData[index].pprice = parseFloat(priceInput.value) || 0;
  });
  
  // 绑定删除事件，同步删除数组数据
  createTD4.addEventListener("click", () => {
    createTR.remove();
    productData.splice(index, 1);
  });
  
  // 初始化数组数据项
  productData[index] = {
    pname: '',
    pweight: '',
    pprice: 0
  };
  
  return createTR;
}

function addTableRowBtn() {
  let id = IdString + i;
  const tableEle = creatTableEl(id, i);
  tbody.insertBefore(tableEle, addBtn);
  i++;
}

function Table() {
  for (let y = 0; y < 4; y++) {
    let id = IdString + y;
    const constTableEle = creatTableEl(id, y);
    tbody.insertBefore(constTableEle, addBtn);
  }
  addBtn.addEventListener("click", addTableRowBtn);
}

Table();

// 示例：查看实时数据
// setInterval(() => {
//   console.log('实时产品数据：', productData);
// }, 1000);

说明：

修正原代码中重复ID问题（删除按钮改用class）
删除行时同步删除数组对应数据项，保持数据一致性
输入框内容变化时立即更新数组，确保数据实时性

方法三：简化DOM操作，避免依赖动态ID

完全可以抛弃动态生成的ID，通过DOM结构关系直接定位元素，简化代码逻辑，避免ID冲突风险。

简化后的创建函数片段：

function creatTableEl(id, index) {
  const createTR = document.createElement("tr");
  createTR.setAttribute("id", id);
  
  // 直接通过HTML字符串组装行结构
  createTR.innerHTML = `
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="number"></td>
    <td class="Delete">&#10006;</td>
  `;
  
  // 绑定删除事件
  createTR.querySelector('.Delete').addEventListener('click', () => {
    createTR.remove();
    productData.splice(index, 1);
  });
  
  // 绑定输入事件
  createTR.querySelector('td:nth-child(1) input').addEventListener('input', e => {
    productData[index].pname = e.target.value.trim();
  });
  createTR.querySelector('td:nth-child(2) input').addEventListener('input', e => {
    productData[index].pweight = e.target.value.trim();
  });
  createTR.querySelector('td:nth-child(3) input').addEventListener('input', e => {
    productData[index].pprice = parseFloat(e.target.value) || 0;
  });
  
  productData[index] = { pname: '', pweight: '', pprice: 0 };
  return createTR;
}

内容的提问来源于stack exchange，提问作者MD Meadul Islam