将 textarea 中的 CSV 输入转换为动态表答案

【问题标题】：Converting CSV input in textarea to dynamic table将 textarea 中的 CSV 输入转换为动态表
【发布时间】：2017-12-25 19:55:36
【问题描述】：

这张照片定义了我需要什么

我希望将我动态输入的数据转换为表格，每个逗号定义列，换行符定义新行。

以下是我尝试过的代码。我能有更好的方法来解决这个问题吗？

 <script>
        function myFunction() 
                            {
 var x = document.getElementById("textarea").value.split(" ");         
  var customers = new Array();
    customers.push(x[0]);
    customers.push(x[1]);
    customers.push(x[2]);
   
   
    var table = document.createElement("TABLE");
    table.border = "1";
 
    //Get the count of columns.
    var columnCount = customers[0].length;
 
    //Add the header row.
    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = customers[0][i];
        row.appendChild(headerCell);
    }
 
    //Add the data rows.
    for (var i = 1; i < customers.length; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < columnCount; j++) {
            var cell = row.insertCell(-1);
            cell.innerHTML = customers[i][j];
        }
    }
 
    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);

                            }           
 </script>

<html>
<head>
    <title>Player Details</title>
	
	</head>
	<body align = "center">
            <h3 align = "center"><b>Input CSV</b></h3>
            
           
            <p align = "center"><textarea rows="10" cols="50" name = "csv" id = "textarea"></textarea></p><br>
           
            <button type="button" id = "convert" onclick="myFunction()">Convert</button><br>
            <br>
            
               
            <div id = "team"></div>
            
	</body>
	</html>

【问题讨论】：

@Deshant 请点击链接stackoverflow.com/a/36104178/1624893
请提供一些您使用过的代码，以表明您已尝试自己解决此问题。正如其他人所说，这不是编码服务。这可以通过在任何给定的价值搜索引擎上进行简单查询来解决。
你为什么用空格（“”）分割你的输入？我在您的 csv 输入中看不到任何空格。如果您想开始，我只需将其按行 ("\n") 拆分，然后用逗号 (",") 拆分以获取列和行（如果您不这样做）不想使用任何花哨的 JS 库。
@xander，先生，var x 将把所有输入作为字符串作为每个新行的空格分隔。所以为了区分我用 (" ") 分割的每个换行符。
@xander 好的先生，我现在正在尝试。谢谢。

标签： javascript csv

【解决方案1】：

您需要先使用换行符 (\n) 拆分数据，然后使用逗号 (,) 字符。该表可以创建为字符串，最后插入到正确的 div 中。

请参阅下面的代码以帮助您入门。

function myFunction() {
      var tbl = "<table class='table table-responsive table-bordered table-striped'><tbody>"
      var lines = document.getElementById("textarea").value.split("\n");
      for (var i = 0; i < lines.length; i++) {
        tbl = tbl + "<tr>"
        var items = lines[i].split(",");
        for (var j = 0; j < items.length; j++) {
          tbl = tbl + "<td>" + items[j] + "</td>";
        }
        tbl = tbl + "</tr>";
      }
      tbl = tbl + "</tbody></table>";
      var divTable = document.getElementById('team');
      console.log(tbl);
      divTable.innerHTML = tbl;


    }

我已经为 css 使用了 bootstrap，您可能想使用自己的（或不使用）。

请参考jsFiddle here。

【讨论】：