无法编辑此HTML表格

Question

我希望能够在HTML表中编辑一行。 我正在尝试此代码，但是运行后，单击“ edit按钮时，出现此错误： Cannot set property innerHTML of null 。 不知道为什么。

HTML：

<html>

<head>
    <meta charset="UTF-8">

</head>

<body id="body">

    <div id="wrapper">
        <table align='center' cellspacing=1 cellpadding=1 id="mytable" border=1>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Action</th>
                </tr>


            </thead>
            <tbody id="tbody">
              <tr>
                <td><input type="text" id="inputname"></td>

                <td>
                    <select name="levels-list" id="inputlevel">
                    <option value="High" id="option-1">High</option>
                    <option value="Mid" id="option-2">Mid</option>
                    <option value="Low" id="option-3">Low</option>
                    </select>
                </td>

                <td><input type="button" class="add" id="add-button" value="Add"></td>
                </tr>

            </tbody>
        </table>
    </div>
  <!--  <button onclick='display()'> Display</button> -->
    <script src="get-text.js"></script>
</body>

</html>

脚本：

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

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

 function addRow(){
    event.preventDefault();
    var newData= document.getElementById("inputname").value;
    var newLevel = document.getElementById("inputlevel").value;
    var table = document.getElementById("mytable");
    var tableLength = (table.rows.length)-1;
    var htmltext=
    "<tr id= 'row"+tableLength+"'>\
      <td id='inputname"+tableLength+"'>"+newData+"</td> \
      <td id='inputlevel"+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>";

    table.insertRow(tableLength).innerHTML=htmltext;
}//end addRow

function editRow(no)
{
  var htmltext =
  "<tr>\
    <td><input id='inputname"+no+"' type='text' value='"+myArray[no].name+"'></td>\
    <td>\
    <select id='inputlevel"+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>\
    </td>\
    <td><button onclick='saveRow("+no+")'>Save</button><button onclick='deleteRow("+no+")'>Remove</button></td>\
    </tr>";
  document.getElementById("inputlevel"+no).value=myArray[no].level; //to set the saved element as default when edit button is pressed.
  document.getElementById("row"+no).innerHTML = htmltext;
}//end editRow

function saveRow()
{

}

function deleteRow()
{

}

Answer 1

问题恰好是@Lixus提到的。

您的insertRow函数将覆盖您的代码部分，因此，当您执行innerHTML时，该标签基本上被忽略。 – Lixus

解

在添加行函数table.insertRow(tableLength).innerHTML=htmltext;替换此行table.insertRow(tableLength).innerHTML=htmltext;

与以下

var row = table.insertRow(tableLength); row.setAttribute("id", "row"+tableLength); row.innerHTML=htmltext;

同时从htmltext删除tr标签

释

它的作用是在位置（表格长度）处插入一行
然后将您的id属性设置为rowX，其中X是表格长度
然后为该行设置您的innerhtml

无法编辑此HTML表格

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-27 14:14:25

无法编辑此HTML表格

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-27 14:14:25

解决方案1
0 已采纳 2017-05-27 14:14:25