JavaScript setAttribute ID 到行未定义

Question

我试图给动态添加的每一行一个唯一的 ID。基本上是在用户每次单击添加按钮时添加数字。它正在添加一个 ID，但不正确，它在开发工具中显示为“未定义”。

var counter = 0;
function appendRow(id, style) {
  var table = document.getElementById(id); // table reference
  length = table.length,
  row = table.insertRow(table.rows.length, 'id');      // append table row
  row.setAttribute('id', style);
  row.setAttribute('idName', style);
  var i;
  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {
      createCell(row.insertCell(i), i, 'cust' + counter);
      counter++
  }
}

function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
      txt = document.createTextNode('_'); // create text node
  div.appendChild(txt);               // append text node to the DIV
  div.setAttribute('id', style);        // set DIV class attribute
  div.setAttribute('idName', style);    // set DIV class attribute for IE (?!)
  cell.appendChild(div);                   // append DIV to the table cell
}

table { 
  text-align: center;
}
td { 
  width: 100px;
}


tr:nth-child(even) {
  background-color: #fff;
}
tr:nth-child(odd) {
  background-color: #eee;
}

<button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
<div class="custScroll">
        <table id="custListTop" contenteditable="false">
          <tr>
            <td style="border-top-left-radius: 5px;">Customers</td>
            <td style="border-top-right-radius: 5px;">Main Location</td>
          </tr>
        </table>
        <table id="custList" contenteditable="true">
          <tr>
            <td>Someone</td>
            <td>Somewhere</td>
          </tr>
        </table>
      </div>

Answer 1

新元素显示为“未定义”的原因是未提供 appendRow 的样式参数。

要获得您想要的功能，您必须从 appendRow 参数中删除样式，并将 appendRow 中对样式的引用替换为 'cust' + counter。

Answer 2

您的样式值在这里为空请检查样式值我还添加了小提琴

请检查此代码，当用户单击按钮时，样式值未定义。

<button id="addCust" class="addSort" ***onclick="appendRow('custList')"***>add customer</button>

Appendrow 函数需要两个参数，而您只传递一个。

var counter = 0;
$('#addCust').click(function() {
  var table = document.getElementById('custListTop'); // table reference
  length = table.length,
  row = table.insertRow(table.rows.length, 'id'); // append table row
  row.setAttribute('id', counter);
  row.setAttribute('idName', counter);
  var i;
  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {
    createCell(row.insertCell(i), i, 'cust' + counter);
    counter++
  }
});


function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
    txt = document.createTextNode('_'); // create text node
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute('id', style); // set DIV class attribute
  div.setAttribute('idName', style); // set DIV class attribute for IE (?!)
  cell.appendChild(div); // append DIV to the table cell
}

table {
  text-align: center;
}

td {
  width: 100px;
}

tr:nth-child(even) {
  background-color: #fff;
}

tr:nth-child(odd) {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addCust" class="addSort">add customer</button>
<div class="custScroll">
  <table id="custListTop" contenteditable="false">
    <tr>
      <td style="border-top-left-radius: 5px;">Customers</td>
      <td style="border-top-right-radius: 5px;">Main Location</td>
    </tr>
  </table>
  <table id="custList" contenteditable="true">
    <tr>
      <td>Someone</td>
      <td>Somewhere</td>
    </tr>
  </table>
</div>