JavaScriptセルが行と一致しません

Question

私はユーザーが顧客を追加でき、顧客が追加されると、その行とその行内の各セルに一意のIDが与えられます。

あなたが見ることができるように、あなたが行を追加するとき、私はrow.idとcell.idを記録しているが、しかし、cell.idは'cell_' + rowCount + '_' + iことになっているが、細胞内ROWCOUNTが行のものと一致しません。

// 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

あなたは

それが1に設定されている場合はあなたが最初にそれを設定し、その後、行のをrowCountを使用している

'cell_' + rowCount

続い row.id = 'row' + rowCount; rowCount++

を持っています2、それが設定されているときにセル上でそれを使用する〜2。