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

Question

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

我也想包括删除行，所以每当我点击按钮“删除”具有特定ID的行将删除。

Here's my 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>"; 
} 

在此先感谢

Answer 1

你需要以1添加到它与++运算符定义它，当你的变量设置为0。另外，在你的代码中删除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>"; 
} 

Answer 2

这是因为你把它回到这里

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

移除此行。

这是jsFiddle。并与var rowID = 0;

Answer 3

初始化它，我认为你有几个错别字，请参见注释：

//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>"; 
} 

Answer 4

要设置rowID=1所以每一次都会有值1。你也需要设置rowID=0如果要增加，否则，如果你don'y初始化它，它会导致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

Answer 5

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/

Answer 6

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

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

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