javascript - 未捕获的类型错误 : Cannot set property

Question

我很困惑到底为什么它会返回错误

Uncaught TypeError: Cannot set property 'outerHTML' of null
at delete_row (table_script.js:10)
at HTMLInputElement.onclick (table.html:1)`

有人可以帮我确定如何修复该错误。

我的代码:

var temp_image;
var temp_title;
var temp_description;



function delete_row(no) {
  if (confirm("Are you sure you want to delete?")) {
    document.getElementById("row" + no + "").outerHTML = "";
  } else
    alert("Data is not deleted");
}


function add() {
  var new_image = document.getElementById("new_image").value;
  var new_title = document.getElementById("new_title").value;
  var new_description = document.getElementById("new_description").value;

  if (temp_image && temp_description && temp_title != null) {
    alert("hello world");
  } else if (new_image && new_title && new_description != "") {
    var table = document.getElementById("data_table");
    var table_len = (table.rows.length) - 1;
    var row = table.insertRow(table_len).outerHTML =
      "<tr class='myrow'><td id='row" + table_len + "'><img id='image_row" + table_len + "' src = " + new_image + "><td id='title_row" + table_len + "' class='titleData'>" + new_title +
      "</td><td class='descData' id='description_row" + table_len + "'>" + new_description + "</td><td><input type='button' value='Delete' class='delete' onclick='delete_row(this);'><input type='button' value='Edit' class='edit' onclick='edit_row(" + table_len + ",this)'></td></td></tr>";

    document.getElementById("new_image").value = "";
    document.getElementById("new_title").value = "";
    document.getElementById("new_description").value = "";
  }
}

<form id="myForm">
  <table id="data_table" align='center' cellspacing=2 cellpadding=5>
    <tr>
      <th>Image Link</th>
      <th>Title</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><input type="text" id="new_image"></td>
      <td><input type="text" id="new_title"></td>
      <td><input type="text" id="new_description"></td>
      <td><input type="button" class="add" value="SAVE" id="save_btn" onclick="add()"></td>
    </tr>
  </table>
</form>

我只想在单击删除按钮时删除行。似乎outerHTML 有错误，因为它将返回空值。谢谢。

Answer 1

当您使用 onclick='delete_row(this);' 时，会出现错误传递一个对象 this ，而不是行号。

相反，您可以尝试这样的操作，在哪里可以找到 closest() tr并删除它，例如

function delete_row(el)
{
    if (confirm("Are you sure you want to delete?")) {
        el.closest('tr').remove();
    } else 
        alert("Data is not deleted");
}

<小时/>

如果要保留现有的删除功能，请更改 onlick对此

onclick='delete_row(" + table_len + ");'

我仍然推荐第一个建议，即使用 .outerHTML删除一个元素的可读性不太好。

<罢工>

<罢工>

或者你可以这样做，用 onclick='delete_row(" + table_len + ");'

function delete_row(no)
{
    if (confirm("Are you sure you want to delete?")) {
        document.getElementById("row" + no).parentNode.remove();
    } else 
        alert("Data is not deleted");
}

<罢工>

<小时/>

已更新，删除了我的第二个建议。

感谢Karan ，使用现有的解决方案可能会适得其反，原因是您正在使用 (table.rows.length) - 1获取id .

它可能产生的问题是您最终会得到 2 行具有相同的 id .