버튼이 예상대로 표시되지 않습니다.

Question

내 HTML에서 버튼을 클릭하고 for 루프 및 각 행의 끝에 버튼에 따라 X 행이 만들어지기를 기대합니다.

나는 다음과 같이 출력을 기대하고있다 :

버튼을 첫 번째 행에 렌더링하지 않습니다 어떤 이유로 그러나

<table> 
<tr> 
    <td> first element </td> 
    <button> </button> 
</tr> 
<tr> 
    <td> first element </td> 
    <button> </button> 
</tr> 
</table> 

:

<table> 
    <tr> 
     <td> first element </td> 
    </tr> 
    <tr> 
     <td> first element </td> 
     <button> </button> 
    </tr> 
    </table> 

이 내가 사용하고있는 코드입니다 :

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    var button = document.createElement('button'); 
    button.setAttribute("id", "unMatchButton"); 
    console.log(array.length, 'ARRAY'); 
    for (var i = 0; i < array.length; i++) { 
     console.log(array[i], 'ai'); 
     var row = document.createElement('tr'); 
     var cell = document.createElement('td'); 
     cell.textContent = array[i]; 
     row.appendChild(cell); 
     row.appendChild(button); 
     table.appendChild(row); 
    } 
    return table; 
} 

Answer 1

나는 리터를보고 출력을 기대하고있다 이이

견적 구조가 올바르지 않습니다. button을 tr의 직계 자녀로 지정할 수 없습니다. the spec for tr에서 tr 요소에 포함될 수있는 유일한 것은 td, th 또는 스크립트 지원 요소입니다.

그러나 버튼을 첫 번째 행에 렌더링하지 않습니다 어떤 이유로 :

만 한 button 요소를 만든 때문에

다음은 두 개의 별도의 행에 추가. 그것을 덧붙이 지 않으면 복제하지 못하며, 은 이전 부모 (있을 경우)에서 새 부모로 이동합니다.

를 해결하려면 :

1. 새로운 button 새 버튼을 할 때마다 만들기 (새로운 id로, 문서에서 고유해야합니다 id 값 ).

2. tr이 아니라 td에 button을 덧붙입니다.

예 :

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td');    // Second td 
 
    var button = document.createElement('button'); // New button for each 
 
    button.setAttribute("id", "unMatchButton" + i); // Unique id 
 
    cell.appendChild(button);      // Button in cell 
 
    row.appendChild(cell);       // Add second cell 
 
    table.appendChild(row); 
 
    } 
 
    return table; 
 
} 
 
document.body.appendChild(
 
    makeHTMLMatchesTable(["one", "two", "three"]) 
 
);

Answer 2

당신이

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    console.log(array.length, 'ARRAY'); 
    for (var i = 0; i < array.length; i++) { 
    console.log(array[i], 'ai'); 
    var row = document.createElement('tr'); 
    var cell = document.createElement('td'); 
    cell.textContent = array[i]; 
    var button = document.createElement('button'); 
    button.setAttribute("id", "unMatchButton"); 
    row.appendChild(cell); 
    row.appendChild(button); 
    table.appendChild(row); 
} 

return table; 

}