JS实现点击按钮向JSON对象数组表格添加行的问题排查

你代码中的错误按影响优先级排序如下：

• 语法错误：函数末尾多余了一个反引号`，会直接导致JS解析函数失败，函数完全无法执行，这是点击无响应的最直接原因。
• 取值逻辑错误：document.getElementById('ntxt') 获取的是输入框DOM元素本身，不是用户输入的内容，需要追加.value属性才能拿到输入值，否则即使函数执行，单元格也只会显示[object HTMLInputElement]这类异常内容。
• 变量声明不规范：除table外其余变量都没有加let/const声明，会变成隐式全局变量，容易引发变量污染问题，另外用逗号连接多个变量声明的写法可读性差，建议改为独立语句用分号结尾。
• 数据同步遗漏：你用cars.length作为insertRow的参数，首先要确认cars是可访问的全局数据数组，其次新增行后没有同步往cars数组中添加对应数据，会导致你已经完成的排序功能和表格实际内容不同步。
• 潜在的事件绑定问题：需要确认Add按钮已经绑定了addTableRow点击事件，示例绑定写法：<button onclick="addTableRow()">新增</button>，未绑定的话点击不会触发函数。

修正后的参考代码 #

function addTableRow() {
    const table = document.getElementById("tableObjects");
    // insertRow传入-1默认插入到表格最后一行，不需要依赖cars长度
    const newRow = table.insertRow(-1);
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    const cell3 = newRow.insertCell(2);
    // 取输入框实际输入值
    const ntxt = document.getElementById('ntxt').value;
    const gtxt = document.getElementById('gtxt').value;
    const rtxt = document.getElementById('rtxt').value;

    cell1.innerHTML = ntxt;
    cell2.innerHTML = gtxt;
    cell3.innerHTML = rtxt;

    // 同步更新数据数组，保证排序功能正常，对象字段替换为你实际的字段名即可
    cars.push({
        name: ntxt,
        grade: gtxt,
        rate: rtxt
    })
}

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