如何删除表中的行

How to delete row in table?

本文关键字：删除 何删除      更新时间：2023-09-26

我要删除我在函数add()中创建的行。当我使用deleteRow()函数时，行将被删除，但我不能再次使用add()函数。有人知道为什么吗?

var trIdP =0;
function add() {
 var typeP = document.getElementById("typeP").value;
 var valueP = document.getElementById("valueP").value;
 var newText = document.createTextNode(typeP);
 var newText2 = document.createTextNode(valueP+" Eur");
 var newText3 = document.createTextNode("button");
 var tablePr = document.getElementById("tableP").getElementsByTagName('tbody')[0];
 if ((typeP != "") && (valueP != "")) {       
     var newRow = tablePr.insertRow(trIdP);
     newRow.id = ("trP"+trIdP);
     var newCell1 = newRow.insertCell(0);
     var newCell2 = newRow.insertCell(1);
     var newCell3 = newRow.insertCell(2);
     newCell1.appendChild(newText);
     newCell2.appendChild(newText2);
     newCell3.innerHTML = "<a onclick='"deleteRow("+trIdP+")'"><img   src='"x.gif'" alt='"Delete row'"></a>";
     document.getElementById("typeP").value = "";
     document.getElementById("valueP").value = "";
     trIdP++;
 }
}
function deleteRow(id){
      document.getElementById("trP"+id).remove();
}

您忘记减少trIdP计数器。

更新:

// Code goes here
var trIdP = 0;
function add() {
  var typeP = document.getElementById("typeP").value;
  var valueP = document.getElementById("valueP").value;
  var newText = document.createTextNode(typeP);
  var newText2 = document.createTextNode(valueP + " Eur");
  var newText3 = document.createTextNode("button");
  var tablePr = document.getElementById("tableP").getElementsByTagName('tbody')[0];
  if ((typeP !== "") && (valueP !== "")) {
    var newRow = tablePr.insertRow(-1);
    newRow.id = "trP" + trIdP;
    var newCell1 = newRow.insertCell(0);
    var newCell2 = newRow.insertCell(1);
    var newCell3 = newRow.insertCell(2);
    newCell1.appendChild(newText);
    newCell2.appendChild(newText2);
    newCell3.innerHTML = "<a onclick='"deleteRow(" + trIdP + ")'"><div>Row: " + trIdP + "</div></a>";
    document.getElementById("typeP").value = "";
    document.getElementById("valueP").value = "";
    trIdP++;
  }
}
function deleteRow(id) {
  document.getElementById("trP" + id).remove();
}

查看这个活塞

相关文章：