基于字符串数组创建字符串格式"<table> ..." HTML 表

Question

我正在尝试基于一些输入参数创建一个表"头球身体；报头接收字符串"0"；头1；及其价值由分隔，并且主体接收包含具有由分隔的字符串，我尝试绘制主体值，但绘制的值水平显示。

这篇文章适用于一个无法操作dom的环境；Oracle集成云">

function convertStringToHtml(headers, body) {
var headersArr = headers.split(",");
var table = "<table>";
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
var bodyArr = [];
headersArr.forEach((headerTable) => {
tableHeader = tableHeader + "<th>" + headerTable + "</th>";
});
body.forEach((bodyTable) => {
bodyTable.forEach((List) => {
bodyArr.push(List.split(","));
});
});
var longest = bodyArr.reduce(
(headers, body) => (headers.length > body.length ? headers : body), []
);
bodyArr.forEach((bodyList, listKey) => {
tableBody = tableBody + "<tr>";
bodyList.forEach((list, key) => {
console.log(list);
if (list.length !== longest.length - 1) {
console.log(" list: ", list, " key :", key, " listKey:", listKey);
tableBody = tableBody + "<td>" + bodyArr[listKey][key] + "</td>";
}
});
tableBody = tableBody + "</tr>";
});
table =
"<table>" +
tableHeader +
"</tr></thead>" +
tableBody +
"</tbody>" +
"</table>";
return table;
}
var headerList = "Header 1,Header 2,Header 3";
var dataList = [
["TEST1,TEST1,TEST1"],
["TEST2,TEST2,TEST2"],
["TEST3,TEST3,TEST3"],
];
console.log(convertStringToHtml(headerList, dataList));

预期响应

<table border="1">
<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>

Answer 1

正如@Taplar所说，你应该包括一个最小限度的可复制示例，并遵循网站的最佳实践。

也就是说，一般来说，一旦你有了一个包含HTML的字符串，你就可以在页面中插入，为此你需要一个DOM节点。

<div id="root"></div>

创建容器或确定要将元素放入其中的容器后，可以通过选择该容器并使用其innerHTML属性来完成此操作。

let rootElement = document.querySelector('#root')
document.innerHTML = "<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>TEST1</td><td>TEST1</td><td>TEST1</td></tr><tr><td>TEST2</td><td>TEST2</td><td>TEST2</td></tr><tr><td>TEST3</td><td>TEST3</td><td>TEST3</td></tr></tbody></table>"

您可以在此处找到有关此属性的更多信息。

Answer 2

var headerList = "Header 1,Header 2,Header 3";
var dataList = [
["TEST11,TEST12,TEST13"],
["TEST21,TEST22,TEST23"],
["TEST31,TEST32,TEST33"],
];
var tableHTML=
"<table border=1>n"+
"  <thead>n"+
"    <tr>n"+
headerList.split(",").map(header=>"      <th>"+header+"</th>n").join("")+
"    </tr>n"+
"  </thead>n"+
"  <tbody>n"+
dataList.map(row=>"    <tr>n"+
row[0].split(",").map(cell=>"      <td>"+cell+"</td>n").join("")+
"    </tr>n").join("")+
"  </tbody>n"+
"</table>";
document.body.innerHTML+=tableHTML;
console.log(tableHTML);

headerList.split(",")返回一个标头数组
然后，我们将每个映射为用th包围
然后，我们将它们合并为该行的内容。

dataList.map取主体的每个子阵列-dataList
row[0]获取这些子数组中的第一个(也是唯一一个(项
然后我们为每个单元格内容split，并用td包围
然后，我们将它们合并为一行的内容
直到创建完所有行为止。

我们用thead包围标题行，用tbody包围
正文行，并用table包围整个行。

最后，我们将tableHTML添加到document.body的innerHTML-
中，就完成了！

添加了缩进和换行符。

Answer 3

解决方案：

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;
}