Question

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

/profile

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

Answer 1

你的风格值为空，请检查风格值我还添加了小提琴

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

<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>

Answer 2

新元素出现的原因是＆＃34; undefined＆＃34;是因为尚未提供appendRow的style参数。

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

对行的JavaScript setAttribute ID是Undefined

2 个答案: