[英]How create table from array comma separated strings javascript
我正在嘗試根據一些用逗號分隔的輸入字符串創建一個 html 表
// HeaderTable = Headers Table
// DataTable = Body Table
輸入值:
headerTable = "Header1,Header2,Header3"
dataTable = [["TEST1,TEST1,TEST1"],["TEST2,TEST2,TEST2"],["TEST3,TEST3,TEST3"]]
預期回應:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
</tr>
</tbody>
</table>
返回一串html表格代碼
預期響應格式格式圖像
我的代碼Jsfiddle
嘗試這個:
<div id="container"></div>
let dataList = ["TEST1", "TEST2", "TEST3"] let headerList = [" Header 1", "Header 2", "Header 3"] let container = document.getElementById('container'); let thead = document.createElement('thead'); let th = document.createElement('th'); let tbody = document.createElement('tbody'); let td = document.createElement('td'); let tr = document.createElement('tr'); container.appendChild(tr); container.appendChild(thead); thead.appendChild(tr); for(let i = 0; i < headerList.length; i++){ th = document.createElement('th'); th.textContent = headerList[i]; tr.appendChild(th); } container.appendChild(tbody); tbody.appendChild(tr); for(let i = 0; i < dataList.length; i++){ td = document.createElement('td'); td.textContent = dataList[i]; tr.appendChild(td); }
這里:
function createTable(a, b) {
let table = document.createElement("table");
let headerList = a;
let dataList = b;
var thead = document.createElement("thead");
table.appendChild(thead);
var tbody = document.createElement("tbody");
table.appendChild(tbody);
(function () {
var headerArray = headerList.split(", ");
var row = document.createElement("tr");
thead.appendChild(row);
for (var i = 0; i < headerArray.length; i++) {
var headerCell = document.createElement("th");
headerCell.innerText = headerArray[i];
row.appendChild(headerCell);
}
})();
(function () {
var dataArrays = [];
for (var i = 0; i < dataList.length; i++) {
dataArrays.push(dataList[i].split(", "));
}
var longest = dataArrays.reduce((a, b) => (a.length > b.length ? a : b), []);
for (var i = 0; i < longest.length; i++) {
var row = document.createElement("tr");
tbody.appendChild(row);
}
var rows = tbody.childNodes;
for (var i = 0; i < dataArrays.length; i++) {
for (var x = 0; x < dataArrays[i].length; x++) {
var cell = document.createElement("td");
cell.innerText = dataArrays[i][x];
rows[x].appendChild(cell);
}
}
for (var i = 0; i < rows.length; i++) {
for (var x = 0; x < rows[i].childNodes.length; x++) {
if (rows[i].childNodes.length !== longest.length - 1) {
var cell = document.createElement("td");
rows[i].appendChild(cell);
}
}
}
})();
return table;
}
/* --- Usage --- */
var headerList = "Header 1, Header 2, Header 3";
var dataList = ["TEST1, TEST1, TEST1", "TEST2, TEST2"];
var table = createTable(headerList, dataList);
document.body.appendChild(table);
這將創建表(與“預期響應”完全一樣)並將其存儲在table
變量中。 只需使用.appendChild(table)
將其插入到 DOM 中。
然而,雖然這有效,但我真的建議您使用嵌套數組(而不是使用字符串)。
解決方案
function convertStringToHtml(headers, body) {
var headersArr = headers.split(",");
var table = "<table>";
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
var bodyArr = [];
// Order Array Data
var orderArr = [];
var responseArr = [];
const lengthBodyElementArr = body[0][0].split(",").length;
// Create Header Table
headersArr.forEach((headerTable) => {
tableHeader = tableHeader + "<th>" + headerTable + "</th>";
});
// Order Array
for (var increment = 0; increment < lengthBodyElementArr; increment++) {
orderArr = [];
body.forEach((bodyElement) => {
bodyElement.forEach((internalBodyElement) => {
bodyArr = internalBodyElement.split(",");
bodyArr.forEach((element, key) => {
if (key == increment) {
orderArr.push(element);
}
});
});
});
responseArr.push(orderArr);
}
// Create Body Table
responseArr.forEach((bodyList) => {
tableBody = tableBody + "<tr>";
bodyList.forEach((element) => {
tableBody = tableBody + "<td>" + element + "</td>";
});
tableBody = tableBody + "</tr>";
});
table =
"<table>" +
tableHeader +
"</tr></thead>" +
tableBody +
"</tbody>" +
"</table>";
return table;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.