無法編輯此HTML表格

我希望能夠編輯HTML表格中的一行。我正在嘗試此代碼，但運行後，當我點擊edit按鈕時，出現此錯誤：Cannot set property innerHTML of null。無法弄清楚原因。無法編輯此HTML表格

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() 
{ 

}

來源

2017-05-27 user7945230

您的'insertRow'函數重載您的代碼的'部分，所以當您執行innerHTML時，該標記基本上被忽略。 – Lixus

我已經在您打開的其他答案中回答了您的問題：https://stackoverflow.com/questions/44210939/problems-with-html-and-javascript-dynamic-table/44211463?noredirect=1#comment75440254_44211463 – quirimmo

可能的重複[與HTML和JavaScript動態表問題]（https://stackoverflow.com/questions/44210939/problems-with-html-and-javascript-dynamic-table） – quirimmo

的到底是什麼問題@Lixus提及。

Your insertRow function is overriding your part of your code, so when you do the innerHTML, that tag is basically ignored. – Lixus

解決方案

在您添加行函數替換該行 table.insertRow(tableLength).innerHTML=htmltext;

具有以下

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

而且從刪除tr標籤210

釋

它的作用是在現在的位置（臺長）插入一行
然後設置你的id屬性一行x其中X是表的長度
然後設置你的innerHTML爲那行

來源

2017-05-27 14:14:25 noyanc

無法編輯此HTML表格

回答

相關問題