HTML和Javascript动态表的问题

我在以下方面面临问题：

函数

saveRow

不保存该行。我得到这个错误：

未捕获的TypeError:无法在HTMLInputElement.onclick的存储行设置未定义的属性名。 2）

deleteRow

不起作用。我得到了一个类似的错误： 未捕获的TypeError:无法将属性“innerHTML”设置为null。 3） 在

editRow

中，I字段变为可编辑，但默认值与以前保存的值相同。例如，列表总是A、B、C，这不是我想要的。我希望列表的初始值是以前选择的值

我应该是做错了什么。代码如下：

HTML:

名称
水平仪
行动
A.
B
C

剧本：

var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];


display();

function display() {
  var length = myArray.length;
  var htmlText = "";

  for (var i = 0; i < length; i++) {
    htmlText +=
      "<tr id='row" + i + "'>\
                <td>" + myArray[i].name + "</td>\
                <td>" + myArray[i].level + "</td>\
                <td>\
                    <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='editRow("+i+")'> \
                    <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \
                    <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\
                </td>\
            </tr>";
  }//end loop
  htmlText+=
  "<tr>\
    <td><input type='text' id='name-text'></td>\
    <td>\
      <select name='levels-list' id='levels-list'>\
        <option value='A' id='option-1'>A</option>\
        <option value='B' id='option-2'>B</option>\
        <option value='C' id='option-3'>C</option>\
        </select>\
    </td>\
    <td><input type='button' class='add' value='Add Row' id='add-button' ></td>\
  </tr>";

  document.getElementById("table-rows").innerHTML = htmlText;
}//end display

var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);

function addRow(){
  event.preventDefault();
  var newData= document.getElementById("name-text").value;
  var newLevel = document.getElementById("levels-list").value;

  var table = document.getElementById("data_table");
  var tableLength = (table.rows.length)-1;
//  console.log(tableLength);
  var row = table.insertRow(tableLength).innerHTML=
   "<tr id= 'row"+tableLength+"'>\
        <td id='name-text"+tableLength+"'>"+newData+"</td>\
        <td id='levels-list"+tableLength+"'>"+newLevel+"</td>\
        <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \
            <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \
            <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\
        </td>\
   </tr>";

  document.getElementById("name-text").value="";
}//end addRow

function editRow(no)
{
  document.getElementById("edit-button"+no).disabled=true;
   //document.getElementById("save-button"+no).style.display="block";

   var name=document.getElementById("name-text"+no);
   var level=document.getElementById("levels-list"+no);

   var nameData=name.innerHTML;
   var levelData=level.innerHTML;

   name.innerHTML="<input type='text' id='name_text"+no+"' value='"+nameData+"'>";
   level.innerHTML='<select id="levels-list'+no+'">\
                      <option value="A" id="option-1">A</option>\
                      <option value="B" id="option-2">B</option>\
                      <option value="C" id="option-3">C</option>\
                      </select>' ;

  document.getElementById("levels-list"+no).value = levelData;
}

function deleteRow(no) {
  myArray.splice(no, 1);
  document.getElementById("row"+no).innerHTML="";
  //display();
} //end deleteRow

function saveRow(no)
{
  myArray[no].name = document.getElementById("name-text"+no).value;
  myArray[no].level = document.getElementById("levels-list"+no).value;

  document.getElementById("row"+no).innerHTML =
  "<tr id= 'row"+no+"'>\
    <td id='name-text"+no+"'>"+myArray[no].name+"</td>\
    <td id='levels-list"+no+"'>"+myArray[no].level+"</td>\
    <td><input type='button' id='edit-button"+no+"' value='Edit' class='edit' onclick='editRow("+no+")'> \
        <input type='button' value='Delete' class='delete' onclick='deleteRow("+no+")'>\
    </td>\
   </tr>";
}//end saveRow

var myArray=[{
“名称”：“aaa”，
“级别”：“A”
}, {
“名称”：“bbb”，
“级别”：“B”
}, {
“名称”：“ccc”，
“级别”：“C”
}];
显示（）；
函数显示（）{
var length=myArray.length；
var htmlText=“”；
对于（变量i=0；i

我对您的代码进行了一些重构，并创建了一个新的JSFIDLE。您可以对其进行越来越多的重构，如果可能的话，可以在项目中插入jQuery，只需对其进行更多的重构即可

很少注意到：

1） 使您的模型与您的UI更改保持同步。在前面的示例中，您正在处理HTML，但没有更新数组模型

2） 尽量将常用代码保存在函数中，以避免重复。 例如，我移动了用于在函数中创建行的逻辑，并且每次需要创建新行时只调用该函数（用于在开始和单击“添加行”时显示）

3） 当您在行中调用函数时，还要传递当前HTML元素。您可以传递它，以便知道单击了哪个当前HTML元素，以便可以轻松地操作该行

4） 使用两个tbodies。一个用于数据，另一个用于操作。这样可以更容易地将数据与操作区分开来，避免每次都重复该行的操作

还有一些你可以单独用代码检查的东西

您必须只管理在正确操作中禁用按钮的逻辑，以避免在编辑时再次单击“编辑”，但这是一个很好的练习：）

以下是示例：

var myArray=[{
“名称”：“aaa”，
“级别”：“A”
}, {
“名称”：“bbb”，
“级别”：“B”
}, {
“名称”：“ccc”，
“级别”：“C”
}];
函数createDataRow（el，ind）{
var行=document.createElement（'tr'）；
row.id='row-'+ind；
变量Cell1内容=`
${el.name}
`;
变量cell2Content=`
${el.level}
A\
B\
C\
`;
变量cell3Content=`
`;
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=cell1内容；
cell2.innerHTML=cell2Content；
cell3.innerHTML=cell3Content；
document.getElementById（'table-data'）.appendChild（行）；
}
函数displayData（）{
forEach（函数（el，ind）{
创建数据行（el，ind）；
});
}
函数deleteRow（el，ind）{
el.parentElement.parentElement.parentElement.removeChild（el.parentElement.parentElement）；
myArray.splice（ind，1）；
}
函数addRow（）{
event.preventDefault（）；
var newEl={
“名称”：document.getElementById（“名称文本”）.value，
“级别”：document.getElementById（“级别列表”）.value
};
myArray.push（newEl）；
createDataRow（newEl，myArray.length-1）；
document.getElementById（“名称文本”）。值=“”；
document.getElementById（“级别列表”）.value='A'；
}//结束添加行
函数编辑行（el，ind）
{
var currentRow=el.parentElement.parentElement；
currentRow.cells[0]。getElementsByClassName(
var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];


display();

function display() {
  var length = myArray.length;
  var htmlText = "";

  for (var i = 0; i < length; i++) {
    htmlText +=
      "<tr id='row" + i + "'>\
                <td>" + myArray[i].name + "</td>\
                <td>" + myArray[i].level + "</td>\
                <td>\
                    <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='editRow("+i+")'> \
                    <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \
                    <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\
                </td>\
            </tr>";
  }//end loop
  htmlText+=
  "<tr>\
    <td><input type='text' id='name-text'></td>\
    <td>\
      <select name='levels-list' id='levels-list'>\
        <option value='A' id='option-1'>A</option>\
        <option value='B' id='option-2'>B</option>\
        <option value='C' id='option-3'>C</option>\
        </select>\
    </td>\
    <td><input type='button' class='add' value='Add Row' id='add-button' ></td>\
  </tr>";

  document.getElementById("table-rows").innerHTML = htmlText;
}//end display

var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);

function addRow(){
  event.preventDefault();
  var newData= document.getElementById("name-text").value;
  var newLevel = document.getElementById("levels-list").value;

  var table = document.getElementById("data_table");
  var tableLength = (table.rows.length)-1;
//  console.log(tableLength);
  var row = table.insertRow(tableLength).innerHTML=
   "<tr id= 'row"+tableLength+"'>\
        <td id='name-text"+tableLength+"'>"+newData+"</td>\
        <td id='levels-list"+tableLength+"'>"+newLevel+"</td>\
        <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \
            <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \
            <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\
        </td>\
   </tr>";

  document.getElementById("name-text").value="";
}//end addRow

function editRow(no)
{
  document.getElementById("edit-button"+no).disabled=true;
   //document.getElementById("save-button"+no).style.display="block";

   var name=document.getElementById("name-text"+no);
   var level=document.getElementById("levels-list"+no);

   var nameData=name.innerHTML;
   var levelData=level.innerHTML;

   name.innerHTML="<input type='text' id='name_text"+no+"' value='"+nameData+"'>";
   level.innerHTML='<select id="levels-list'+no+'">\
                      <option value="A" id="option-1">A</option>\
                      <option value="B" id="option-2">B</option>\
                      <option value="C" id="option-3">C</option>\
                      </select>' ;

  document.getElementById("levels-list"+no).value = levelData;
}

function deleteRow(no) {
  myArray.splice(no, 1);
  document.getElementById("row"+no).innerHTML="";
  //display();
} //end deleteRow

function saveRow(no)
{
  myArray[no].name = document.getElementById("name-text"+no).value;
  myArray[no].level = document.getElementById("levels-list"+no).value;

  document.getElementById("row"+no).innerHTML =
  "<tr id= 'row"+no+"'>\
    <td id='name-text"+no+"'>"+myArray[no].name+"</td>\
    <td id='levels-list"+no+"'>"+myArray[no].level+"</td>\
    <td><input type='button' id='edit-button"+no+"' value='Edit' class='edit' onclick='editRow("+no+")'> \
        <input type='button' value='Delete' class='delete' onclick='deleteRow("+no+")'>\
    </td>\
   </tr>";
}//end saveRow