如何从数组逗号分隔的字符串 javascript 创建表答案

【问题标题】：How create table from array comma separated strings javascript如何从数组逗号分隔的字符串 javascript 创建表
【发布时间】：2020-12-27 05:50:43
【问题描述】：

我正在尝试根据一些用逗号分隔的输入字符串创建一个 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表格代码

预期的回复格式Format Image

我的代码Jsfiddle

【问题讨论】：

您能具体解释一下您需要什么吗？
根据逗号分隔的字符串数组创建一个html表
你介意把你的代码放到 jsfiddle 上吗？那真的很有帮助。
完成我用 jsfiddle 更新帖子

标签： javascript arrays html-table

【解决方案1】：

解决方案

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

【讨论】：

【解决方案2】：

这里：

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。

然而，虽然这可行，但我真的应该建议您使用嵌套数组（而不是使用字符串）。

【讨论】：

非常感谢，我会尝试并做出您提到的更改，因为它适用于 Oracle 集成云环境

【解决方案3】：

试试这个：

&lt;div id="container"&gt;&lt;/div&gt;

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

【讨论】：