innerHTML添加新元素仅生效一次，新增客户行数据重复问题

创建客户信息表格时，每次新增客户，新行总是复用第一个客户的数据，且元素存在反复删除重建的异常。代码除全局customers数组外，99%逻辑封装在箭头函数中。

HTML #

<table class="customersTable">
  <thead>
    <tr class="headingRow">
      <th>
        <input
          type="checkbox"
          name="masterCheckBox"
          class="masterCheckBox"
        />
      </th>
      <th>מספר סידורי</th>
      <th>מספר לקוח</th>
      <th>איש קשר</th>
      <th>בית העסק</th>
      <th>עיר</th>
      <th>רחוב ומספר</th>
      <th>קומה</th>
      <th>כניסה</th>
      <th>טלפון</th>
      <th>אימייל</th>
      <th>הערות</th>
    </tr>
  </thead>
  <tbody class="customersTbody"></tbody>
</table>

JavaScript #

创建元素函数 #

createRow = () => {
  const Row = document.createElement(`tr`);
  const checkBoxTD = document.createElement(`td`);
  const serialNumberTD = document.createElement(`td`);
  const uniqueIDTD = document.createElement(`td`);
  const contactNameTD = document.createElement(`td`)
  const businnesNameTD = document.createElement(`td`);
  const cityTD = document.createElement(`td`);
  const streetAndNumberTD = document.createElement(`td`);
  const floorTD = document.createElement(`td`);
  const entranceTD = document.createElement(`td`);
  const emailTD = document.createElement(`td`);
  const phoneTD = document.createElement(`td`);
  const textAreaTD = document.createElement(`td`);

  return {
    Row,
    checkBoxTD,
    serialNumberTD,
    uniqueIDTD,
    contactNameTD,
    businnesNameTD,
    cityTD,
    streetAndNumberTD,
    floorTD,
    entranceTD,
    emailTD,
    phoneTD,
    textAreaTD,
  };
};

注入值函数 #

injectRowValues = () => {
  const createdRowElements = createRow();
  const dataArray = convertAndLoad();
  const uniqueID = generateID();
  const customersTbody = document.querySelector(`.customersTbody`);

  let checkBoxTD = createdRowElements.checkBoxTD;
  let serialNumberTD = createdRowElements.serialNumberTD;
  let uniqueIDTD = createdRowElements.uniqueIDTD;
  let contactNameTD = createdRowElements.contactNameTD;
  let businnesNameTD = createdRowElements.businnesNameTD;
  let cityTD = createdRowElements.cityTD;
  let streetAndNumberTD = createdRowElements.streetAndNumberTD;
  let floorTD = createdRowElements.floorTD;
  let entranceTD = createdRowElements.entranceTD;
  let phoneTD = createdRowElements.phoneTD;
  let emailTD = createdRowElements.emailTD;
  let textAreaTD = createdRowElements.textAreaTD;

  for (let i = 0; i < customers.length ; i++) {
    console.log(customers);
    checkBoxTD.innerHTML = `<input type="checkbox" name="masterCheckBox" class="masterCheckBox" />`;
    serialNumberTD.innerHTML = customersTbody.childNodes.length;
    uniqueIDTD.innerHTML = uniqueID;
    contactNameTD.innerHTML = dataArray[customers.length - customers.length].contactInput;
    businnesNameTD.innerHTML = dataArray[i].businnesNameInput;
    cityTD.innerHTML = dataArray[i].cityInput;
    streetAndNumberTD.innerText = dataArray[i].streetAndNumberInput;
    floorTD.innerHTML = dataArray[i].floorInput;
    entranceTD.innerHTML = dataArray[i].entranceInput;
    emailTD.innerHTML = dataArray[i].emailInput.toLowerCase();
    phoneTD.innerText = `${dataArray[i].phoneInput1} \n ${dataArray[i].phoneInput2}`;
    textAreaTD.innerText = dataArray[i].addCustomerTextArea;
     console.log(customers);

    return {
      checkBoxTD,
      serialNumberTD,
      uniqueIDTD,
      contactNameTD,
      businnesNameTD,
      cityTD,
      streetAndNumberTD,
      floorTD,
      entranceTD,
      emailTD,
      phoneTD,
      textAreaTD,
    };
  }
};

追加函数 #

appendRow = () => {
  const createdRowElement = createRow();
  const createdRowElements = injectRowValues();
  const customersTbody = document.querySelector(`.customersTbody`);

  customersTbody.append(createdRowElement.Row);
  createdRowElement.Row.append(
    createdRowElements.checkBoxTD,
    createdRowElements.serialNumberTD,
    createdRowElements.uniqueIDTD,
    createdRowElements.contactNameTD,
    createdRowElements.businnesNameTD,
    createdRowElements.cityTD,
    createdRowElements.streetAndNumberTD,
    createdRowElements.floorTD,
    createdRowElements.entranceTD,
    createdRowElements.phoneTD,
    createdRowElements.emailTD,
    createdRowElements.textAreaTD
  )
  closeModal();
};

核心问题 #

1. injectRowValues循环逻辑失效：循环内直接return，仅处理customers数组第一个元素就终止，永远只注入第一个客户的数据。
2. contactNameTD取值固定：dataArray[customers.length - customers.length]等价于dataArray[0]，强制取第一个数据项，而非当前新增客户的数据。
3. 重复创建行元素：appendRow中先调用createRow()，injectRowValues内部又调用一次，导致两套独立的行元素，最终追加的行与注入值的元素不匹配，引发错乱。

修复后代码 #

修改injectRowValues函数 #

改为接收单条客户数据，移除无效循环：

injectRowValues = (customerData) => {
  const createdRowElements = createRow();
  const uniqueID = generateID();
  const customersTbody = document.querySelector(`.customersTbody`);

  const { checkBoxTD, serialNumberTD, uniqueIDTD, contactNameTD, businnesNameTD, cityTD, streetAndNumberTD, floorTD, entranceTD, phoneTD, emailTD, textAreaTD } = createdRowElements;

  checkBoxTD.innerHTML = `<input type="checkbox" name="masterCheckBox" class="masterCheckBox" />`;
  serialNumberTD.innerHTML = customersTbody.childNodes.length + 1;
  uniqueIDTD.innerHTML = uniqueID;
  contactNameTD.innerHTML = customerData.contactInput;
  businnesNameTD.innerHTML = customerData.businnesNameInput;
  cityTD.innerHTML = customerData.cityInput;
  streetAndNumberTD.innerText = customerData.streetAndNumberInput;
  floorTD.innerHTML = customerData.floorInput;
  entranceTD.innerHTML = customerData.entranceInput;
  emailTD.innerHTML = customerData.emailInput.toLowerCase();
  phoneTD.innerText = `${customerData.phoneInput1} \n ${customerData.phoneInput2}`;
  textAreaTD.innerText = customerData.addCustomerTextArea;

  return createdRowElements;
};

修改appendRow函数 #

直接获取最新客户数据，避免重复创建行：

appendRow = () => {
  const dataArray = convertAndLoad();
  const customerData = dataArray[dataArray.length - 1];
  const createdRowElements = injectRowValues(customerData);
  const customersTbody = document.querySelector(`.customersTbody`);

  customersTbody.append(createdRowElements.Row);
  createdRowElements.Row.append(
    createdRowElements.checkBoxTD,
    createdRowElements.serialNumberTD,
    createdRowElements.uniqueIDTD,
    createdRowElements.contactNameTD,
    createdRowElements.businnesNameTD,
    createdRowElements.cityTD,
    createdRowElements.streetAndNumberTD,
    createdRowElements.floorTD,
    createdRowElements.entranceTD,
    createdRowElements.phoneTD,
    createdRowElements.emailTD,
    createdRowElements.textAreaTD
  );
  customers.push(customerData);
  closeModal();
};

内容的提问来源于stack exchange，提问作者viko randazo