如何解决JavaScript动态缓冲数组项追加及表记录添加功能故障

DevOps 小满

2026-8-3

问题排查与解决方案

核心问题分析

你的代码存在以下关键问题，导致缓冲数组无法正常追加记录：

参数传递错误：AddSelectedItem中调用addItemToList时，target变量取的是strArr.target，但strArr是字符串分割后的数组，根本不存在target属性，导致传入函数的item为undefined，逻辑无法执行。
DOM元素获取错误：document.getElementById('#panel_result2')中，getElementById不需要加#前缀，这会导致destination为null。
函数逻辑冗余：addItemToList试图克隆DOM元素并追加到目标容器，但AddSelectedItem已经完成了目标表的行添加操作，你只需要将记录数据存入缓冲数组即可，无需重复操作DOM。

修改后的完整代码

源表HTML（无需修改）

<div id="panel_content" style="width:100%;text-align:left;height:190px;overflow-y:hidden;">
   <table width="100%" border="0" cellpadding="0" cellspacing="0" height="165">
      <tbody>
         <tr>
            <td colspan="3">
               <div id="panel_result" style="width: 100%; text-align: center; vertical-align: top; height: 150px; overflow: hidden auto; display: inline;">
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; vertical-align:top;">
                     <tbody>
                        <tr>
                           <td class="titleStyle" style="width:165px;white-space:nowrap;">Name</td>
                           <td class="titleStyle" style="width:165px;white-space:nowrap;">Code</td>
                        </tr>
                     </tbody>
                  </table>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; vertical-align:top;">
                     <tbody>
                        <tr>
                           <td width="165px" nowrap=""><a ondrag="return false;" href="javascript:AddSelectedItem('ABC^0090^C71F952E-ED74-4138-8061-4B50B9EF6463^0090')">ABC</a></td>
                           <td width="165px" nowrap=""><a ondrag="return false;" href="javascript:AddSelectedItem('ABC^0090^C71F952E-ED74-4138-8061-4B50B9EF6463^0090')">0090</a></td>
                        </tr>
                        <tr>
                           <td width="165px" nowrap=""><a ondrag="return false;" href="javascript:AddSelectedItem('ABC^CRE^C5F3A034-9F28-4767-86EC-9E9F1394ED9C^CRE')">ABC</a></td>
                           <td width="165px" nowrap=""><a ondrag="return false;" href="javascript:AddSelectedItem('ABC^CRE^C5F3A034-9F28-4767-86EC-9E9F1394ED9C^CRE')">CRE</a></td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

目标表HTML（无需修改）

<div id="panel_content2" style="width:100%;text-align:left;height:190px;overflow-y:hidden;">
   <table width="100%" border="0" cellpadding="0" cellspacing="0" height="165">
      <tbody>
         <tr>
            <td colspan="3">
               <div id="panel_header2" style="height:30px;width:100%;text-align:center;display: inline;">
                  <table cellspacing="0" cellpadding="0" align="Center" border="0" style="border-width:0px;width:100%;border-collapse:collapse;border-collapse:collapse;valign:top;">
                     <tbody>
                        <tr>
                           <td class="titleStyle" style="width:250px;white-space:nowrap;">Name</td>
                           <td class="titleStyle" style="width:250px;white-space:nowrap;">Code</td>
                           <td class="titleStyle" style="width:5px;"></td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </td>
         </tr>
         <tr>
            <td colspan="3">
               <div id="panel_result2" style="height:150px;width:99%;overflow:auto;text-align:center;position:30;vertical-align:top;height:150;overflow-y:auto;overflow-x:hidden;">
                  <table id="TSelected" cellspacing="0" cellpadding="0" border="0" style="border-width:0px;border-collapse:collapse;border-width: 0px; width: 100%; border-collapse: collapse; border-collapse: collapse; valign: top;">
                     <tbody>
                        <tr id="TR1" valign="top">
                           <td width="2px">
                              <input type="HIDDEN" id="list_name_1" name="list_name_1" value="ABC">
                              <input type="HIDDEN" id="list_code_1" name="list_code_1" value="C71F952E-ED74-4138-8061-4B50B9EF6463">
                              <input type="HIDDEN" id="list_comparecode_1" name="list_comparecode_1" value="0090">
                           </td>
                           <td width="244">ABC</td>
                           <td width="256">0090</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

修改后的JavaScript代码

// 全局缓冲数组，用于存储添加的记录
const bufferArray = [];

function AddSelectedItem(sValue) {
    let AddRow = true;
    sValue = sValue.replace("~", "%"); // 替换自定义Replace为标准replace方法
    const strArr = sValue.split("^"); // 改为局部变量，避免全局污染
    const theTable = document.getElementById("TSelected");
    const Tablerow = theTable.rows.length;

    // 检查记录是否已存在，存在则不添加
    for (let d = Tablerow - 1; d > -1; d--) {
        const TRId = theTable.rows[d].id;
        const idNum = TRId.replace("TR", "");
        const codeObj = document.getElementById("list_comparecode_" + idNum);
        if (codeObj.value === strArr[3]) {
            AddRow = false;
            break; // 找到重复项后直接退出循环，提升效率
        }
    }

    if (AddRow) {
        // 获取唯一行号
        let RowNum = 0;
        for (let d = Tablerow - 1; d > -1; d--) {
            const TRId = theTable.rows[d].id;
            const idNum = TRId.replace("TR", "");
            if (parseInt(idNum) > RowNum) {
                RowNum = parseInt(idNum);
            }
        }
        RowNum += 1;

        const insertIndex = 0;
        const TR = document.getElementById("TSelected").insertRow(insertIndex);
        TR.id = "TR" + RowNum;
        TR.vAlign = 'top';

        let TD = TR.insertCell(insertIndex);
        TD.width = "2px";
        TD.innerHTML = `<INPUT TYPE='HIDDEN' ID='list_name_${RowNum}' NAME='list_name_${RowNum}' value='${strArr[0]}'><INPUT TYPE='HIDDEN' ID='list_code_${RowNum}' NAME='list_code_${RowNum}' value='${strArr[2]}'><INPUT TYPE='HIDDEN' ID='list_comparecode_${RowNum}' NAME='list_comparecode_${RowNum}' value='${strArr[3]}'>`;

        TD = TR.insertCell(insertIndex + 1);
        TD.width = "244";
        TD.innerHTML = strArr[0]; // 名称

        TD = TR.insertCell(insertIndex + 2);
        TD.width = "256";
        TD.innerHTML = strArr[1]; // 编码

        TD = TR.insertCell(insertIndex + 3);
        TD.width = "5px";
        // 更新行计数（确保RowCount元素存在）
        const rowCountEle = document.getElementById("RowCount");
        if (rowCountEle) rowCountEle.value = RowNum;
        
        // 将记录以结构化对象形式追加到缓冲数组
        bufferArray.push({
            name: strArr[0],
            code: strArr[1],
            uuid: strArr[2],
            compareCode: strArr[3]
        });
        console.log('当前缓冲数组:', bufferArray);
    }
    ChangeSaveCloseButtonStatus();
}

// 兼容原Replace方法（如果环境中没有自定义实现）
if (!String.prototype.Replace) {
    String.prototype.Replace = function(search, replace) {
        return this.replace(search, replace);
    };
}

关键修改说明

简化缓冲数组逻辑：删除冗余的DOM克隆操作，直接在AddSelectedItem中将结构化的记录数据追加到bufferArray，便于后续读取和使用。
修复参数错误：移除无效的target变量，不再调用错误的DOM操作逻辑。
优化代码细节：将全局strArr改为局部变量，避免全局污染；在重复项检查中添加break提升效率；使用模板字符串简化HTML拼接；增加对RowCount元素存在性的判断。

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

如何解决JavaScript动态缓冲数组项追加及表记录添加功能故障

核心问题分析 #

修改后的完整代码 #

源表HTML（无需修改） #

目标表HTML（无需修改） #

修改后的JavaScript代码 #

关键修改说明 #

核心问题分析

修改后的完整代码

源表HTML（无需修改）

目标表HTML（无需修改）

修改后的JavaScript代码

关键修改说明