한 번에 하나씩 배열 요소 출력

Question

현재 양식 데이터 (단일 텍스트 필드)를 빈 배열로 밀어 넣으면 '제출'을 클릭 할 때마다 데이터가 배열의 끝에 푸시됩니다 (따라서 배열)가 커질수록

내가 경험하고있다 : 나는 테이블의 출력 각 요소를 싶습니다,하지만 난 행마다 그것을 하나 개의 요소를 수행하고 싶지만, 지금은 행마다 다음과 같이 출력

첫 번째 행 : 데이터 입력 및 제출 -> enteredData

두 번째 행 : 더 많은 데이터 입력 및 제출 -> enteredDat enteredData1

나는 다른 요소를 입력하면 수행이 enteredData enteredData1 enteredData2 등 등 .... 여기

내가 반복 한 코드 블록의 : userInputName.push을 (userString);

for (arrayIndex = 0; arrayIndex < userInputName.length; arrayIndex++) {  
    output.innerHTML += "<tr><td>" + userInputName[arrayIndex] + "</td></tr>"; 

} 

내가 루프 내부 조건부 논리의 일종을 누락 같은 느낌,하지만 지금이 순간 (너무 적게 잠)에서 나는 이성적으로 그것을 함께 잇 수 없습니다 |

제가 누락 된 부분에 대한 제안이 있으십니까?

이 내 전체 자바 스크립트 코드 블록 같은 모습입니다 - 내가 관련 질문을 물어 내 다른 스레드에이를 참조 할 수 있습니다 :

//Declare global variable 
var userInputName  = []; 
function displayTableAndTotals() { 
// Your code goes in here. 
//var totalStrings  = []; 
var userString; 
var arrayIndex; 
var output; 
var outputTotal; 
var form; 

form    = document.getElementById("userFormId"); 
output    = document.getElementById("userEntriesId"); 
outputTotal   = document.getElementById("testId"); 
userString   = form.string.value; 

userInputName.push(userString); 

for (arrayIndex = 0; arrayIndex < userInputName.length; arrayIndex++) {  
    output.innerHTML += "<tr><td>" + userInputName[arrayIndex] + "</td></tr>"; 

} 

form.string.select(); 
return false; 
} 

Answer 1

는 그냥 밀어 요소

var table = document.querySelector('#myTable'); 

document.querySelector('[type="submit"]').addEventListener('click', function(e) { 
    table.innerHTML += "<tr><td>" + userInputName.reverse()[0] + "</td></tr>"; 
}, false); 

Answer 2

을 추가 할 수 있습니다를 좋은 슬픔, 물론 나는 내 자신의 문제를 해결할 때 나는 영원히 고난을 겪고 나서 상담을했습니다.

기본적으로 나는이 작업을 수행하는 데 필요한 다음 tableData 변수가 지속적으로 전체 일마다 시간을 다시 제출하지 않고 새로운 반복 포함됩니다

for (arrayIndex = 0; arrayIndex < userInputName.length; arrayIndex++) {  
    tableData = "<tr><td>" + userInputName[arrayIndex] + "</td></tr>"; 
    totalCount = userInputName.length; 
} 

output.innerHTML += tableData; 
outputTotal.innerHTML = "<h4>Total Number of Strings: " + totalCount + "</h4>"; 

form.string.select(); 
return false; 

그래야. 그렇게하면 tableData를 루프 외부로 적절하게 출력 할 수 있습니다.

내가받은 의견에 감사드립니다.

감사합니다.