如何使用 JavaScript 創建和填充 HTML 表格

Question

 arrayName = ["name1", "name2", "name3"]; arrayAge = [21, 18, 19]; arrayColor = ["green", "blue", "yellow"]; arrayMonth = [1, 6, 4];

 <div class='col-xs-12 col-md-3 last'> <div id='colunaConversaoConsultor' class="col-md-12"> <div id="linhaConversaoConsultorTabela" class="row clearfix"> </div> </div> </div>

我有 4 個 JavaScript 數組，其中一個對應於一列：

arrayName = ["name1", "name2", "name3"];
arrayAge = [21, 18, 19];
arrayColor = ["green", "blue", "yellow"];
arrayMonth = [1, 6, 4];

我有一個這樣的 html 元素：

<div class='col-xs-12 col-md-3 last'>
   <div class="col-md-12">
      <div id="table" class="row clearfix">
      </div>
   </div>
</div>

我需要將這些數組的元素放入我的 html talbe 中，如下所示：

|  Name | Age | Color | Month |
| name1 | 21  | green |   1   |
| name2 | 18  | blue  |   6   |
| name3 | 19  |yellow |   4   |

我正在嘗試使用getElementById("#table")和一些array.ForEach( )但我遇到了麻煩，因為我的數組對應於列而不是行

Answer 1

不久前我遇到了同樣的問題。 您可以使用此函數動態創建此表。 你所要做的就是將一個二維數組傳遞給函數，它就會創建它。

 const data = [ ["Name","Age"], ["Adam", 21], ["Samy", 28] ] function tableCreate(data){ var body = document.body,//Change the body element to the element that you want the table to be inserted into tbl = document.createElement('table'); tbl.style.width = '100px'; tbl.style.border = '1px solid black'; for(var i = 0; i < data.length; i++){ var tr = tbl.insertRow(); for(var j = 0; j < data[i].length; j++){ var td = tr.insertCell(); td.appendChild(document.createTextNode(data[i][j])); td.style.border = '1px solid black'; } } body.appendChild(tbl); } tableCreate(data);

Answer 2

這是通過javascript將表格插入html 。 只需遍歷數組並使用所需數據創建 html 元素。

 const arrayName = ["name1", "name2", "name3"]; const arrayAge = [21, 18, 19]; const arrayColor = ["green", "blue", "yellow"]; const arrayMonth = [1, 6, 4]; const $table = document.getElementById('table'); $table.insertAdjacentHTML('afterbegin', createTable()); function createTableRow(data) { const arr = data.map(e => { return `<td>${e}</td>`; }); return `<tr>${arr.join('')}</tr>`; } function createTable() { const tableRows = arrayName.map((name, i) => { return createTableRow([name, arrayAge[i], arrayColor[i], arrayMonth[i]]); }); return ` <table> <thead> <tr> <td>Name</td> <td>Age</td> <td>Color</td> <td>Month</td> </tr> </thead> <tbody> ${tableRows.join('')} </tbody> </table> `; }

 table, table tr, table td { border: 1px solid; border-collapse: collapse; text-align: center; }

 <div id="table" class="row clearfix"></div>

Answer 3

通過映射到一個數組來簡化，然后使用模板輸出。

您可以整理此示例中的 HTML。

 const arrayName = ["name1", "name2", "name3"]; const arrayAge = [21, 18, 19]; const arrayColor = ["green", "blue", "yellow"]; const arrayMonth = [1, 6, 4]; const master = arrayName.map((name, i) => ({ name, age: arrayAge[i], color: arrayColor[i], month: arrayMonth[i] })); const template = ({name, age, color, month}) => ` <div class='col-xs-12 col-md-3 last'> <div class="col-md-12"> <div id="table" class="row clearfix"> | ${name} | ${age} | ${color} | ${month} | </div> </div> </div> ` document.addEventListener('DOMContentLoaded', () => { document.querySelector('.content').innerHTML = master.map(row => template(row)).join(''); });

 <div>| Name | Age | Color | Month |<div> <div class="content"></div>

Answer 4

您可以通過迭代索引檢索數據。

 let arrayName = ["name1", "name2", "name3"]; let arrayAge = [21, 18, 19]; let arrayColor = ["green", "blue", "yellow"]; let arrayMonth = [1, 6, 4]; let addRow = (...columns) => { let row = document.createElement('div'); columns.forEach(column => { let span = document.createElement('span'); span.textContent = column; row.appendChild(span); }); document.querySelector('#table').appendChild(row); }; arrayName.forEach((name, i) => addRow(name, arrayAge[i], arrayColor[i], arrayMonth[i]));

 #table div {} #table span { border: 1px solid; padding-left: 5px; padding-right: 5px; }

 <div id="table" class="row clearfix"> </div>

Answer 5

 arrayName = ["name1", "name2", "name3"]; arrayAge = [21, 18, 19]; arrayColor = ["green", "blue", "yellow"]; arrayMonth = [1, 6, 4]; var tbl = document.getElementById("table"); var element = document.getElementById("table"); var i =0; for(i =0;i<arrayName.length;i++) { var row = document.createElement("div"); row.setAttribute("class", "row"); row.appendChild(createElement(arrayName[i])); row.appendChild(createElement(arrayAge[i])); row.appendChild(createElement(arrayColor[i])); row.appendChild(createElement(arrayMonth[i])); tbl.appendChild(row); } function createElement(text) { var node = document.createElement("div"); node.setAttribute("class", "col-sm-3"); node.appendChild(document.createTextNode(text)); return node; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="table" class="col-sm-12"> <div class="row"> <div class="col-sm-3">Name</div> <div class="col-sm-3">Age</div> <div class="col-sm-3">Color</div> <div class="col-sm-3">Month</div> </div> </div>

Answer 6

• 使用table.createTHead創建<thead></thead> 。
• 使用insertRow(index)創建<tr></tr> 。
• 使用insertCell(index)創建<td></td> 。

 const data = [ // Titles ["Name", "Age", "Color", "Month"], // Rows ["name1", 21, "green", 1], ["name2", 18, "blue", 6], ["name3", 19, "yellow", 4] ]; function createTable(data, id) { let table = document.createElement("table"); table.setAttribute("id", id); let thead = table.createTHead(); let tr = thead.insertRow(0); data[0].forEach((title) => { let th = document.createElement("th"); th.textContent = title; tr.appendChild(th); }); let tbody = document.createElement("tbody"); for (i = 1; i < data.length; i += 1) { let tr = tbody.insertRow(i - 1); data[i].forEach((datum, j) => { let td = tr.insertCell(j); td.textContent = datum; }); } table.appendChild(tbody); document.body.appendChild(table); } createTable(data, "table");

 #table, #table td, #table th { border: 1px solid; }