JavaScript setAttribute ID zu Zeile ist nicht definiert

Question

Ich versuche, jeder Zeile, die dynamisch eine eindeutige ID hinzugefügt wird. Grundsätzlich, indem jedes Mal, wenn der Benutzer auf die Schaltfläche Hinzufügen klickt, die Zahl zu der Zahl hinzugefügt wird. Es fügt eine ID hinzu, aber nicht korrekt, es wird in den Entwicklungstools als "undefiniert" angezeigt.

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

Der Grund, warum die neuen Elemente als „undefiniert“ zeigen sich ist, weil der Stil Argument von appendRow nicht zur Verfügung gestellt worden.

Um die Funktionalität zu erhalten, müssen Sie den Stil aus den appendRow-Argumenten entfernen und die Referenzen auf Stil in appendRow durch 'cust' + counter ersetzen.

Answer 2

ist Ihr Stil Wert hier null bitte Stil Wert überprüfen habe ich auch Geige hinzugefügt diesen Code

Bitte überprüfen Sie, wenn Benutzer auf die Schaltfläche ist klickt der Stil Wert undefiniert.

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

appendRow Funktion erfordert zwei Parameter und Sie nur auf eine.

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>