JavaScript-Zelle stimmt nicht überein Zeile

Question

Ich habe eine Tabelle, in der der Benutzer Kunden hinzufügen kann, und wenn ein Kunde hinzugefügt wird, wird eine eindeutige ID für die Zeile und jede Zelle in der Zeile angegeben.

Wie Sie sehen können, wenn Sie eine Zeile hinzufügen, ich angemeldet habe die row.id und die cell.id, jedoch ist die cell.id soll 'cell_' + rowCount + '_' + i sein, aber die rowCount in der Zelle nicht mit dem in der Reihe.

// add customer or item 
 
// append row to the HTML table 
 
var rowCount = 1; 
 
var cellCount = 0; 
 

 
function appendRow(id, style) { 
 
    var table = document.getElementById(id); // table reference 
 
    length = table.length, 
 
    row = table.insertRow(table.rows.length); // append table row 
 
    row.setAttribute('id', style); 
 
    var i; 
 
    row.id = 'row' + rowCount; 
 
    rowCount++ 
 
    // insert table cells to the new row 
 
    for (i = 0; i < table.rows[0].cells.length; i++) { 
 
    createCell(row.insertCell(i), i, 'cell_' + rowCount + '.' + i); // starts over when row changes 
 
    cellCount++ 
 
    } 
 
} 
 

 
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 
 
    console.log(row.id + ' ' + div.id); 
 
}

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>Work #</td> 
 
     <td>Cell #</td> 
 
     <td style="border-top-right-radius: 5px;">Main Location</td> 
 
    </tr> 
 
    </table> 
 
    <table id="custList" contenteditable="true"> 
 
    <tr> 
 
     <td>Someone</td> 
 
     <td>903-636-0000</td> 
 
     <td>903-626-0000</td> 
 
     <td>something</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

Sie haben row.id = 'row' + rowCount; rowCount++

gefolgt von

'cell_' + rowCount

Sie sind erste rowCount auf die Reihe zu verwenden, wenn es auf 1 gesetzt ist, dann ist es Einstellung 2, dann verwenden Sie es auf der Zelle, wenn es eingestellt ist zu 2.