為表格單元格提供唯一的ID

Question

我已經創建了一張桌子。

我有輸入文字的地方。 它引用具有特殊值的某些元素。

當我單擊一個按鈕時， productname名稱將添加到表中（使用insertCell() ）。

我想為每個新表元素賦予唯一的ID。

function add1() {
  var row, cell;
  var productname = document.getElementById("produkt1").value; // text input
  var table = document.getElementById("pos1"); // button near text input

  if(productname === "Egg") {
    p = ["Egg", "", 20, 10, 11, 101];
  }
  if(productname === "Milk") {
    p = ["Milk", "", 30, 5, 12, 75];
  }

  row = table.insertRow(2);
  var c_id = 0;

  for (var i = 0; i < p.length ; i++) {
    cell = row.insertCell(i);
    cell.innerHTML = p[i];

    for (var j = 0; j < 1 ; j++) {
      cell.id = 'tdp1' + k_id;
      c_id++; 
    }
  } // It only works for one element, and the others have the same id as elements from row1
}

Answer 1

一種。 單元格行中似乎存在類型cell.id = 'tdp1' + k_id; 應該是c_id而不是k_id

b。 您不需要任何東西的第二個for循環，只需將其刪除即可。 以下代碼為我提供了一個新行，其中包含每個單元格的ID（tdp10至tdp15）

function add1() {
  var row, cell;
  var productname = document.getElementById("produkt1").value; // text input
  var table = document.getElementById("pos1"); // button near text input
  if(productname === "Egg") {
      p = ["Egg", "", 20, 10, 11, 101];
  }
  if(productname === "Milk") {
      p = ["Milk", "", 30, 5, 12, 75];
  }
  row = table.insertRow(2);
  var c_id = 0;
  for(var i = 0; i < p.length ; i++){
      cell = row.insertCell(i);
      cell.innerHTML = p[i];
      cell.id = 'tdp1' + c_id;
      c_id++; 
  }
}

Answer 2

我找到了解決方案：

function add1() {
var row, cell;
var productname = document.getElementById("produkt1").value;
var table = document.getElementById("pos1");
if(productname === "Egg") {
p = ["Egg", "", 20, 10, 11, 101];
}
if(productname === "Milk") {
p = ["Milk", "", 30, 5, 12, 75];
}
var cells = document.getElementsByClassName("pos");
row = table.insertRow(2);
for(var i = 0; i < p.length ; i++){
cell = row.insertCell(i);
cell.innerHTML = p[i];
cell.className = "pos";
for(var j = 0; j < cells.length ; j++){
cell.id = 'tdp1' + j;
}
}

我給創建的單元格一個className。 它正在工作，但是謝謝您的幫助。 :)