增量ID当插入行的JavaScript

Question

我有一个HTML表是这样的：

<table id="dataTableLapis"> 
    <tbody> 
     <tr id="prova1"> 
      <td> 
       <select id="uff_prot" name="lapis_ufficio[]"></select> 
      </td> 
      <td> 
       <input "type="text" id="lapis_vis" name="lapis_vis[]" size="30"> 
      </td> 
      <td> 
       <select id="lapis_ufficio" name="lapis_gruppo_mov[]"></select> 
      </td> 
     </tr> 
    </tbody> 
</table>  

而这个HTML按钮：

<input type="button" value="Aggiungi ufficio protocollo" onClick="addRow('dataTableLapis')" /> 

运行此javascript：

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 5){ 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    }else{ 
     alert("Maximum Passenger per ticket is 5."); 
    } 
} 

我的问题是：当插入新行时，id始终是一些

ROW1 - ID = “uff_prot” - 编号= “lapis_vis” - 编号= “lapis_ufficio”

ROW2 - 编号= “uff_prot” - 编号= “lapis_vis” - 编号= “lapis_ufficio”

我想这样的结果：

ROW1 - ID = “uff_prot1” - ID = “lapis_vis1” - ID = “lapis_ufficio1”

2行 - ID = “uff_prot2” - ID = “lapis_vis2” - id =“lapis_ufficio2”

我该怎么做？

Answer 1

请在行变量的声明下添加row.setAttribute的行。

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 5){ 
     var row = table.insertRow(rowCount); 
      row.setAttribute('id',"lapis_ufficio"+rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    }else{ 
    alert("Maximum Passenger per ticket is 5."); 
} 

Answer 2

不幸的是这一段代码不起作用：

var els = newRow.querySelectorAll("[id]"); 

    for (var i = 0; i < els.length; i++) { 
     els.id += rowCount; 

选择ID输入ID是有的，只改变TR ID