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

Question

I am trying to create an html table based on some input string separated by commas

// HeaderTable = Headers Table  
// DataTable   = Body Table 

Input Values:

headerTable =  "Header1,Header2,Header3"
dataTable   =  [["TEST1,TEST1,TEST1"],["TEST2,TEST2,TEST2"],["TEST3,TEST3,TEST3"]]

Expected response:

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

Return a string of the html table code

Expected response format Format Image

My Code Jsfiddle

Answer 1

Try this:

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

Answer 2

Here:

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

This creates the table (exactly like the "expected response" ) and stores it in the table variable. Simply use .appendChild(table) to insert it into the DOM.

However, while this works, I really should recommend that you use nested arrays (instead of using strings).

Answer 3

Solution

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