자바 스크립트 셀이 행과 일치하지 않습니다.

Question

사용자를 추가 할 수있는 테이블이 있습니다. 고객을 추가하면 해당 행과 각 행에 고유 한 ID가 부여됩니다.

당신이 볼 수 있듯이, 당신이 행을 추가 할 때, 나는 row.id과 cell.id를 기록했다가, 그러나, cell.id은 'cell_' + rowCount + '_' + i 있어야되지만 셀의 행 개수 행에 일치하지 않습니다. 1로 설정되어 때

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

은 row.id = 'row' + rowCount; rowCount++

는 다음으로 설정, 당신은 첫 번째 행에를 rowCount를 사용하는

'cell_' + rowCount

다음에 당신이 2, 설정시 셀에서 사용 ~ 2.