how to display the content of csv file in a input text box?

Question

here i can upload the csv file and displaying the content in html, is it possible to display the each cell value in a input text box, so that i can eddit the information. please help me, thanks in advance.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function Upload() {
  var fileUpload = document.getElementById("fileUpload");
  var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
  if (regex.test(fileUpload.value.toLowerCase())) {
    if (typeof(FileReader) != "undefined") {
      var reader = new FileReader();
      reader.onload = function(e) {
        var table = document.createElement("table");
        var rows = e.target.result.split("\n");
        for (var i = 0; i < rows.length; i++) {
          var row = table.insertRow(-1);
          var cells = rows[i].split(",");
          for (var j = 0; j < cells.length; j++) {
            var cell = row.insertCell(-1);
            cell.innerHTML = cells[j];
          }
        }
        var dvCSV = document.getElementById("dvCSV");
        dvCSV.innerHTML = "";
        dvCSV.appendChild(table);
      }
      reader.readAsText(fileUpload.files[0]);
    } else {
      alert("This browser does not support HTML5.");
    }
  } else {
    alert("Please upload a valid CSV file.");
  }
}

body {
  font-family: Arial;
  font-size: 10pt;
}

table {
  border: 1px solid #ccc;
}

table th {
  background-color: #F7F7F7;
  color: #333;
  font-weight: bold;
}

table th,
table td {
  padding: 5px;
  border-color: #ccc;
}

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body>
  <input type="file" id="fileUpload" />
  <input type="button" id="upload" value="Upload" onclick="Upload()" />
  <hr />
  <div id="dvCSV">
  </div>
</body>

</html>

Yes you can, but you have to google it to learn how to read csv file into php array — Aammad Ullah

JohnV JohnV · Accepted Answer · 2017-04-10T07:42:49

In your code you can change

cell.innerHTML = cells[j];

to

cell.innerHTML = '<input type="text" id="row'+i+'cell'+j+'" value="'+cells[j]+'">';

this will then wrap your items in a input text field. I also included a unique ID for the text fields which you can remove but it stores the row and cell id of the item.

how to display the content of csv file in a input text box?

1 Answers