Javascript-Id值递增行不起作用并按Id删除行

Javascript - Id value Increment rows Does Not Work and Remove Rows By Id

本文关键字：Id 删除行 不起作用 Javascript-Id      更新时间：2023-09-26

我已经创建了添加行，但我的问题是，我创建的id的值不会增加。我只坚持1的结果。

我还想包括删除行，这样每当我单击"删除"按钮时，具有特定id的行就会被删除。

这是我的jsfiddle

<script>
var rowID;
function myFunction() {
    rowID++;
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    rowID=1;
    cell1.innerHTML = "###";
    cell2.innerHTML = "###";
    cell3.innerHTML = rowID;
    cell4.innerHTML = "<button id=''>Remove</button>";
}

提前感谢

这是因为你在这里设置了

var cell4 = row.insertCell(3);
rowID=1; //<-- NOT NEED
cell1.innerHTML = "###";

删除此行。

这是jsFiddle。并用var rowID = 0; 初始化

定义变量时需要将其设置为0，以便使用++运算符向其添加1。还删除代码中的rowID=1(它将其重置为1(，如下所示：

<script>
var rowID = 0;
function myFunction() {
    rowID++;
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "###";
    cell2.innerHTML = "###";
    cell3.innerHTML = rowID;
    cell4.innerHTML = "<button id=''>Remove</button>";
}

我想你有几个打字错误，请参阅评论：

//rowId must be initialized to a number or you'll get Nan with rowId++
var rowID = 0;
function myFunction() {
  rowID++;
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  //this is the reason of your bug
  //rowID=1;
  cell1.innerHTML = "###";
  cell2.innerHTML = "###";
  cell3.innerHTML = rowID;
  cell4.innerHTML = "<button id=''>Remove</button>";
}

var rowID = 0;
function myFunction() {
    rowID++;
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    //rowID=1;
    cell1.innerHTML = "###";
    cell2.innerHTML = "###";
    cell3.innerHTML = rowID;
    cell4.innerHTML = "<button id=''>Remove</button>";
}
  1. 在声明期间将var rowID初始化为0(被认为是良好做法(
  2. 您在函数本身中分配rowid时犯了一个愚蠢的错误

jsFiddle：https://jsfiddle.net/z51z3jj1/2/

您正在设置rowID=1，因此每次都会有值1。如果你想增加rowID=0，你也需要设置它，否则如果你不初始化它，它将导致NaN

<script>
var rowID;
function myFunction() {
    rowID++;
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    rowID=1;
    cell1.innerHTML = "###";
    cell2.innerHTML = "###";
    cell3.innerHTML = rowID;
    cell4.innerHTML = "<button id="+rowID+" onclick='Remove(this)'>Remove</button>";
}
function Remove(btn){
btn.parentElement.parentElement.remove();
}

这是jsfiddle

如果你想删除元素，这是一个选项

row.setAttribute("onclick","remove(this)");

https://jsfiddle.net/z51z3jj1/4/

相关文章：