Question

在这里我可以上传csv文件并在html中显示内容，是否可以在输入文本框中显示每个单元格值，以便我可以编辑信息。请帮助我，提前谢谢。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“＆GT;

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>

Answer 1

在您的代码中，您可以更改

cell.innerHTML = cells[j];

到

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

然后将您的项目包装在输入文本字段中。我还为您可以删除的文本字段添加了一个唯一的ID，但它存储了该项的行和单元格ID。

如何在输入文本框中显示csv文件的内容？

1 个答案: