어떻게 자바 스크립트에서 데이터의 여러 배열에서 HTML 테이블 행을 만들 수 있습니까?

-2

Firebase 프로젝트에서 들어오는 데이터를 표시하려고합니다.어떻게 자바 스크립트에서 데이터의 여러 배열에서 HTML 테이블 행을 만들 수 있습니까?

데이터를 스냅 샷으로 검색 한 후 간단한 HTML 테이블로 가져 오려고합니다.

나는 초기 데이터를 가져 와서 표시해야하는 값 중 3 개의 배열을 추출했습니다.

["title1", "title2", "title3"] 
["author1", "author2", "author3"] 
["1992", "1994", "1987"]

나는 기본이 자바 스크립트 내가 끌어 오기 배열의 수에 따라 테이블 열 수를 생성 기능. 내가 고민하고하는 각 행이되어야한다는 것, 자바 스크립트의 각 행을 구축하는 방법입니다 :

title1 - author1 - year1 
title2 - author2 - year2

등 예를 들어 당신이 배열과 같은 정보를 포함하고 있습니다 들어

출처

2017-12-27 Scott Kipp

는 자바 스크립트를 게시하시기 바랍니다 당신은 당신이 이미 초기 데이터에서 행이 있습니다 – j08691

기회를했습니다. 이 배열을 생성하는 방법과 저장된 데이터가 무엇인지 보여라. – charlietfl

이것은 'for()'루프 일 것이다. 인덱스를 사용하여 각 배열의 해당 요소에 액세스하고 테이블의 셀에 배치하십시오. – Barmar

["title1", "title2", "title3"] 
["author1", "author2", "author3"] 
["1992", "1994", "1987"]

우리가 하나로 결합 별도의 세 가지 배열이>이 경우 "title1", array[1][0] -> "author1" 및 array[2][0] -> "1992"

을 말한다 -

이것은 array[0][0]는 것을 의미한다. 의이 배열의 length이 경우 3에 -> 동일하다고 가정하자 :

function buildData() 
{ 
    var array = [["title1", "title2", "title3"], 
       ["author1", "author2", "author3"], 
        ["1992", "1994", "1987"]]; 
    var table = document.createElement("table"); 
     var trOne = document.createElement("tr"); 
      var thOne = document.createElement("th"); 
       thOne.innerHTML = "Title"; 
      var thTwo = document.createElement("th"); 
       thTwo.innerHTML = "Author"; 
      var thThree = document.createElement("th"); 
       thThree.innerHTML = "Year"; 
      trOne.appendChild(thOne); trOne.appendChild(thTwo); 
      trOne.appendChild(thThree); 
     table.appendChild(trOne); 
    //We created header row and now we will create rows from your array 
    for(var i = 0; i < array[0].length; i++) 
    { 
     var trTwo = document.createElement("tr"); 
      var tdOne = document.createElement("td"); 
       tdOne.innerHTML = array[0][i]; //titles 
      var tdTwo = document.createElement("td"); 
       tdTwo.innerHTML = array[1][i]; //authors 
      var tdThree = document.createElement("td"); 
       tdThree.innerHTML = array[2][i]; //years 
      trTwo.appendChild(tdOne); trTwo.appendChild(tdTwo); 
      trTwo.appendChild(tdThree); 
      table.appendChild(trTwo); 
    } 
    document.body.appendChild(table); 
}

<script> 
 
function buildData() 
 
{ 
 
    var array = [["title1", "title2", "title3"], 
 
       ["author1", "author2", "author3"], 
 
        ["1992", "1994", "1987"]]; 
 
    var table = document.createElement("table"); 
 
     var trOne = document.createElement("tr"); 
 
      var thOne = document.createElement("th"); 
 
       thOne.innerHTML = "Title"; 
 
      var thTwo = document.createElement("th"); 
 
       thTwo.innerHTML = "Author"; 
 
      var thThree = document.createElement("th"); 
 
       thThree.innerHTML = "Year"; 
 
      trOne.appendChild(thOne); trOne.appendChild(thTwo); 
 
      trOne.appendChild(thThree); 
 
     table.appendChild(trOne); 
 
    //We created header row and now we will create rows from your array 
 
    for(var i = 0; i < array[0].length; i++) 
 
    { 
 
     var trTwo = document.createElement("tr"); 
 
      var tdOne = document.createElement("td"); 
 
       tdOne.innerHTML = array[0][i]; //titles 
 
      var tdTwo = document.createElement("td"); 
 
       tdTwo.innerHTML = array[1][i]; //authors 
 
      var tdThree = document.createElement("td"); 
 
       tdThree.innerHTML = array[2][i]; //years 
 
      trTwo.appendChild(tdOne); trTwo.appendChild(tdTwo); 
 
      trTwo.appendChild(tdThree); 
 
      table.appendChild(trTwo); 
 
    } 
 
    document.body.appendChild(table); 
 
} 
 

 
</script> 
 
<body onload='buildData();'> 
 

 
</body>

출처

2017-12-27 22:20:47

@ Scott Kipp 내 솔루션을 사용해 보셨습니까? –

나는 고마워. 비슷하게 진행되었지만 배열 배열을 살펴보면 Firebase에서 JSON을 더 직접 소화하는 것이 더 좋을 것임을 깨달았습니다. 이제 Firebase 객체를 객체 배열로 변환 한 후이를 반복하고 'for (데이터 입력) {// 빌드 테이블} –

@ScottKipp 도움이된다면 내 의견을 "Upvote"할 수 있습니다. 미리 감사드립니다. –

간단한 행 발전기 :

function rowInstance(rowData) { 
    var row = elementInstance("TR"); 

    var len = rowData.length; 
    for(var c = 0; c < len; c++) { 
     var cell = cellInstance(rowData[c]); 

     row.appendChild(cell); 
    } 

    return row; 
} 

function cellInstance(cellData) { 
    var cell = elementInstance("TD"); 
    cell.innerText = cellData; 

    return cell; 
} 

function elementInstance(tagName) { 
    return document.createElement(tagName); 
}

이 (rowInstance에 배열을 전달 ..) 그리고 행을 만들어 채 웁니다.

그냥 당신이 원하는대로 테이블에 추가 :

var table = document.querySelector("#myTable"); 
table.appendChild(rowInstance([0, "text", 9]));

를 루프에 특정 데이터를 :

var titles = ["title1", "title2", "title3"]; 
var authors = ["author1", "author2", "author3"]; 
var years = ["1992", "1994", "1987"]; 

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

var len = titles.length; 
for(var c = 0; c < len; c++) { 
    table.appendChild(rowInstance([ titles[c], authors[c], years[c] ])); 
}

출처

2017-12-27 22:25:11

어떻게 자바 스크립트에서 데이터의 여러 배열에서 HTML 테이블 행을 만들 수 있습니까?

답변

관련 문제