Question

我对为什么它返回错误感到困惑

未捕获的TypeError：无法将属性'outerHTML'设置为null
      在delete_row（table_script.js：10）
      在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>

我只是想在单击删除按钮时删除行。似乎externalHTML出现错误，因为它将返回null值。谢谢。

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。

它可能造成的问题是，您最终得到两行具有相同的id。

未捕获的TypeError：无法设置属性

1 个答案: