JavaScript setAttribute ID to row is Undefined

Question

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>

Use `.id` instead of `.setAttribute('id', ...)`. And what is `style`? CSS??? — ibrahim mahrir, Nov 13 '17 at 19:18
You seem to be only passing one argument to `appendRow()` even though it takes two. Resulting in `style` being undefined. — abagshaw, Nov 13 '17 at 19:18
@ibrahimmahrir There is no problem using `setAttibute` with `id` if you want to. — Scott Marcus, Nov 13 '17 at 19:19
in appendRow() I have (id, style) so that is two, why wouldn't it work? — hannacreed, Nov 13 '17 at 19:20

score 0 · Accepted Answer · answered Nov 13 '17 at 19:48

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.

score -1 · Answer 2 · edited Nov 13 '17 at 19:43

Your style value is null here please check style value I have also added fiddle

Please check this code, When user is clicking on button the style value is undefined.

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

Appendrow function requires two parameters and you are just passing one.

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>

Please don't post code to 3rd party sites as those links can die over time. Just insert a code snippet, right here into your answer. — Scott Marcus, Nov 13 '17 at 19:44

JavaScript setAttribute ID to row is Undefined

2 Answers2