JavaScript setAttribute 행에 대한 ID가 정의되지 않음

Question

동적으로 추가 된 각 행에 고유 ID를 부여하려고합니다. 기본적으로 사용자가 추가 버튼을 클릭 할 때마다 번호에 추가됩니다. 그것은 ID를 추가하고 있지만 정확하게는 "정의되지 않은"dev 도구로 나타나고 있습니다.

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

새로운 요소가 "정의되지 않은"으로 게재되는 이유입니다.

당신이 가고있는 기능을 얻으려면 appendRow 인수에서 스타일을 제거하고 appendRow 내의 스타일에 대한 참조를 'cust' + counter으로 바꿔야합니다.

Answer 2

당신의 스타일 값이 나는 또한 사용자가 버튼을 클릭하면 스타일 값은 정의되지

이 코드를 확인하시기 바랍니다 바이올린

을 추가 한 스타일의 값을 확인하시기 바랍니다 여기 null입니다.

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

Appendrow 함수는 두 개의 매개 변수를 필요로하고 당신은 단지 하나를 통과하고 있습니다. appendRow의 스타일 인수가 제공되지 않았기 때문에

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>