Search code examples
javascripthtmlsetattributeunique-id

JavaScript setAttribute ID to row is Undefined


I am attempting to give each row that is dynamically added a unique ID. Basically by adding to the number each time the user clicks the add button. It is adding an ID, but not correctly, it is showing up as "undefined" in the dev tools.

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>


Solution

  • The reason why the new elements are showing up as "undefined" is because the style argument of appendRow has not been provided.

    To get the functionality that you're going for you have to remove style from the appendRow arguments and replace the references to style inside appendRow with 'cust' + counter.