logo标签列表

将文本框中的CSV输入转换为动态表格

javascriptcsv
3

这张图片定义了我需要的东西

这张图片定义了我需要的东西

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

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

 <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 请跟随此链接 https://dev59.com/hZXfa4cB1Zd3GeqPbzzx#36104178 - Waqas Ahmed
请提供您使用过的一些代码，以表明您已经尝试解决这个问题。正如其他人所说，这不是一个编码服务。这可以通过在任何有价值的搜索引擎上进行简单的查询来解决。 - NoLifeKing
为什么要用空格（“ ”）分割输入？我在你的CSV输入中没有看到任何空格。如果你想开始，我建议你只按行（“\n”）和逗号（“，”）分割来获取列和行，如果你不想使用任何花哨的JS库。 - xander
@xander，先生，变量x将接受所有输入作为由空格分隔的字符串，以区分每个新行，我使用了split（“”）。 - Deshant
@xander 好的，先生，我现在正在尝试。谢谢你。 - Deshant
2个回答
2
你需要首先使用换行符 (\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;


    }

我使用了Bootstrap进行CSS设计，你可以选择自己的CSS框架（或不使用）。

请参考这里的jsFiddle。

0

您可以使用文本区域将制表符分隔的数据粘贴到其中，以创建JSON。假设您的数据有四列而没有标题。

$("#textarea_id").on("change", function () {
var header = ["Key1", "Key2", "Key3", "Key4"];
var rows = $(this).val().split("\n");
var jsonRaw = "[";
for (i = 0; i < rows.length; i++) {
  var row = rows[i].split("\t");
  jsonRaw += "{";
  for (n = 0; n < row.length; n++) {
    jsonRaw += '"' + header[n] + '":"' + row[n] + '"';
    if (n < row.length - 1) {
      jsonRaw += ",";
    }
  }
  jsonRaw += "}";
  if (i < rows.length - 1) {
    jsonRaw += "," 
  };
}
jsonRaw += "]";
var json = JSON.parse(jsonRaw);
  console.log(json);
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接