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;

以下

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

同时从tr

中删除htmltext标记

<强>释

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

无法编辑此HTML表

1 个答案: