動態HTML表格-來自物件資料的特定布局查詢

我正在嘗試使用 JS 創建一組動態 HTML 表。

我正在從一組物件中獲取資料，格式如下：

const formPages = [
  {
    "name": "page1",
    "response": [
      {
        "question": "Question 1",
        "response": "Hello!"
      },
      {
        "question": "Question 2",
        "response": "Hello again!"
      }
    ]
  },
  {
    "name": "page2",
    "response": [
      {
        "question": "Question 3",
        "response": "Bye!"
      },
      {
        "question": "Question 4",
        "response": "Bye again!"
      }
    ]
  }
]

我需要按以下格式為每個頁面輸出一個表格：

第 1 頁

第2頁

我知道我們需要遍歷物件陣列，動態呈現 HTML 以輸出這兩個表。

沒有太多使用表格 HTML 的經驗，所以這里的一些幫助會很棒！

提前致謝！

uj5u.com熱心網友回復：

您可以執行以下操作，請參閱評論以獲取解釋

const formPages = [
  {
    "name": "page1",
    "response": [
      {
        "question": "Question 1",
        "response": "Hello!"
      },
      {
        "question": "Question 2",
        "response": "Hello again!"
      }
    ]
  },
  {
    "name": "page2",
    "response": [
      {
        "question": "Question 3",
        "response": "Bye!"
      },
      {
        "question": "Question 4",
        "response": "Bye again!"
      }
    ]
  }
]
//refer to the placeholder div:
const placeholderDiv = document.getElementById('table-placeholder');
//loop over all pages:
formPages.forEach(page =>{
  //create an element that contains the page
  let h2 = document.createElement('h2');
  h2.innerText = page.name;
  
  //add the element to the div
  placeholderDiv.appendChild(h2); 
  
  //create a table within the foreach loop so you get a seperate table for every page
  let table = document.createElement('table');
  //here the headers are set static, you could chose to also make this dynamic and refer to the object.keys for the response for example
  table.innerHTML ='<thead><tr><th>Question</th><th>Response</th></thead>';
  let tbody = document.createElement('tbody');
  
  //append the body to the table
  table.appendChild(tbody)
  
  //loop over the responses
  page.response.forEach(question =>{
    //create a row
    let trow = document.createElement('tr')
    //create a cell within the row
    let questionCell = document.createElement('td')
    
    //set the innerText of the cell with the value from question
    questionCell.innerText = question.question;
    
    //create another cell within the row
    let responseCell = document.createElement('td')
    
    //set the innerText of the cell with the value from the response
    responseCell.innerText = question.response;
    
    //append both cells to the row
    trow.appendChild(questionCell);
    trow.appendChild(responseCell);
    
    //append the row to the table body
    tbody.appendChild(trow)
  
  })
  
  //append the entire table to the div
  placeholderDiv.appendChild(table)


})

<div id='table-placeholder'> </div>

uj5u.com熱心網友回復：

const cars = [
  {
    "name": "page1",
    "response": [
      {
        "question": "Question 1",
        "response": "Hello!"
      },
      {
        "question": "Question 2",
        "response": "Hello again!"
      }
    ]
  },
  {
    "name": "page2",
    "response": [
      {
        "question": "Question 3",
        "response": "Bye!"
      },
      {
        "question": "Question 4",
        "response": "Bye again!"
      }
    ]
  }
];

let text = "";
for (let i = 0; i < cars.length; i  ) {
    //console.log(cars[i])
    text  ="<h3>" cars[i].name "</h3>";
    text  ="<table border=1>";
    text ="<tr><th>Question</th><th>Response</th></tr>";
    for(let j=0;j<cars[i].response.length;j   ){
        text  ="<tr><td>" cars[i].response[j].question "</td>";
        text  ="<td>" cars[i].response[j].response "</td></tr>";
    }
    text  ="</table>";
}

document.getElementById("demo").innerHTML = text;

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

標籤：javascript网页格式html表格

上一篇：有沒有更好的方法來檢查null并賦值？[復制]

下一篇：如何使用TypeScript鍵入路由器