Converting CSV input in textarea to dynamic table

Question

This picture defines what I need

I want that the data I enter dynamically to be converted to table with each comma defining the column and the newline defining the new row.

Below is the code I have tried. Can I have a better approach to this problem?

 <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 Please follow the link https://stackoverflow.com/a/36104178/1624893 — Waqas Ahmed, Jul 20 '17 at 08:26
Please provide some code that you have used, to show that you have tried to solve this yourself. As others said, this is not a coding service. This could have been solved with a simple query at any given search engine of value. — NoLifeKing, Jul 20 '17 at 08:34
why do you split your input by space (" ")? I don't see any space in your csv input.. If you want to get started I'd just split it by lines ("\n") and then comma (",") to get your columns and rows if you don't want to use any fancy JS lib. — xander, Jul 20 '17 at 08:41
@xander, Sir the var x will take all input as string separated by space for each new line. So to distinguish each newline i used split with (" "). — Deshant, Jul 20 '17 at 08:43

score 2 · Accepted Answer · answered Jul 20 '17 at 09:02

You need to split the data first using newline (\n) and then using comma (,) character. The table can be created as string and finally inserted to the correct div.

Refer the code below to get you started.

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;


    }

I've used bootstrap for css, you may want to use your own (or not).

Refer jsFiddle here.

score 0 · Answer 2 · answered May 12 '23 at 17:00

You can use textarea to paste tab separated data to create JSON. Let's say your data have four columns without header.

$("#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);
})

Converting CSV input in textarea to dynamic table

2 Answers2