Ich überlege wahrscheinlich die Frage, aber wie starte ich einen Zähler neu? Wie Sie in meinem Code sehen, soll der Counter übereinstimmen, tut es aber nicht. Ich möchte, dass die Zelle einen gemeinsamen Wert der Zeile hat, in der sie sich befindet. Die Zellen der ersten Zeile sollten z. B. die ID: Zelle 0.0, Zelle 0.1 haben, aber sie haben eine Zeile übersprungen, bei der die erste Zahl eine Zeile voraus ist.JavaScript Neustart Counter
var rowCount = 0;
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++
console.log(rowCount, cellCount);
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'cell ' + rowCount + '.' + cellCount); // doesn't start over once 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
}
table {
text-align: center;
}
td {
width: 100px;
}
<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>something</td>
</tr>
</table>
</div>
Ihre Zellzähler geht doppelt so schnell, weil es doppelt so viele Zellen wie Zeilen in der Tabelle sind. – trincot