时间戳

首页 > 解决方案 > 我需要将 txt 文件输入到 javascript 中，然后显示一个包含 txt 文件信息的表格

javascript - 我需要将 txt 文件输入到 javascript 中，然后显示一个包含 txt 文件信息的表格

问题描述

我刚开始编程，我收到了那个任务，我有这个 txt 文件：

nombre="Mario";
apellido="Atencio";
cedula="8-782-2289";
telefono="233-7867";
correo="matencio@misitio.com";
nombre2="Roberto";
apellido2="Icaza";
cedula2="8-582-2149";
telefono2="393-5517";
correo2="ricaza@miweb.com";

我需要先输入它，然后把它变成一个表格；我能够使用以下代码创建文本的输入和阅读：

<input type="file" id="file-input" />
<h3>Contenido del archivo:</h3>
<pre id="contenido-archivo"></pre>
</head>
<script>
function CargarClientes(e) {
  var archivo = e.target.files[0];
  if (!archivo) {
    return;
  }
  var lector = new FileReader();
  lector.onload = function(e) {
    var contenido = e.target.result;
    mostrarContenido(contenido);
  };
  lector.readAsText(archivo);
}

function mostrarContenido(contenido) {
  var elemento = document.getElementById('contenido-archivo');
  elemento.innerHTML = contenido;
}
document.getElementById('file-input')
  .addEventListener('change', CargarClientes, false);
</script>

但它只显示了 txt 文件中的内容，所以我尝试将 txt 文件更改为变量，如下所示

<script>
var apple=2;
var nombre="Mario";
var apellido="Atencio";
var cedula="8-782-2289";
var telefono="233-7867";
var correo="matencio@misitio.com";
var nombre2="Roberto";
var apellido2="Icaza";
var cedula2="8-582-2149";
var telefono2="393-5517";
var correo2="ricaza@miweb.com";
</script>

当我运行它并输入 txt 文件时，它没有显示任何内容，所以我猜这是将它作为变量读取，但我不知道如何将它们放入表中。我只知道如何在 HTML 上制作这样的表格：

<style>
  table {
    width: 80%;
    border: 1px solid #fff;
    box-shadow: -18px -8px 20px #ccc;
    margin-left: 13%;
  }
  
  tr {
    width: 100%;
  }
  
  td {
    background: transparent;
    width: 10%;
    border-top: 1px solid #003;
    border-right: none;
    border-left: none;
    font: 62% Arial, Helvetica;
    padding: 6px;
    text-align: right;
  }
  
  th {
    font: 62% Arial, Helvetica;
    background: #8ADBFE;
    color: #FFFFFF
  }
  
  .phpcolor {
    text-align: center;
    background: #CBCBCB;
    color: #BDEBFE
  }
</style>
<table cellpadding=0 cellspacing=0>
  <thead>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Cedula</th>
    <th>Telefono</th>
    <th>Correo Electronico</th>
    <tr>
      <td class='phpcolor'>Huron</td>
      <td class='phpcolor'>SD</td>
      <td class='phpcolor'>1281</td>
      <td class='phpcolor'>100</td>
      <td class='phpcolor'>-30</td>
    </tr>
    <tr>
      <td class='phpcolor'>Rapid&nbsp;City</td>
      <td class='phpcolor'>SD</td>
      <td class='phpcolor'>3162</td>
      <td class='phpcolor'>106</td>
      <td class='phpcolor'>-30</td>
    </tr>
</table>

（表格必须有一些特定的颜色），问题来了，因为如果我混合代码的两个部分，我可以看到输入文件的按钮，但表格已经存在（这就是为什么我没有尝试使用表中的变量）。所以基本上我需要使用 txt 文件中的变量在输入 txt 后出现表格。我什至不知道我使用的代码是否正确，或者我是否需要以不同的方式制作表格。

这就是我想出的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="utf-8">
  <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  <meta name="dcterms.created" content="Tue, 17 Nov 2020 04:16:07 GMT">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <title></title>
  <style>
    table {
      width: 80%;
      border: 1px solid #fff;
      box-shadow: -18px -8px 20px #ccc;
      margin-left: 13%;
    }
    
    tr {
      width: 100%;
    }
    
    td {
      background: transparent;
      width: 10%;
      border-top: 1px solid #003;
      border-right: none;
      border-left: none;
      font: 62% Arial, Helvetica;
      padding: 6px;
      text-align: right;
    }
    
    th {
      font: 62% Arial, Helvetica;
      background: #8ADBFE;
      color: #FFFFFF
    }
    
    .phpcolor {
      text-align: center;
      background: #CBCBCB;
      color: #BDEBFE
    }
  </style>
  <input type="file" id="file-input" />
  <h3>Contenido del archivo:</h3>
  <pre id="contenido-archivo"></pre>
</head>
<script>
  function CargarClientes(e) {
    var archivo = e.target.files[0];
    if (!archivo) {
      return;
    }
    var lector = new FileReader();
    lector.onload = function(e) {
      var contenido = e.target.result;
      mostrarContenido(contenido);
    };
    lector.readAsText(archivo);
  }

  function mostrarContenido(contenido) {
    var elemento = document.getElementById('contenido-archivo');
    elemento.innerHTML = contenido;
  }
  document.getElementById('file-input')
    .addEventListener('change', CargarClientes, false);
</script>

<body>

  <body>
    <table cellpadding=0 cellspacing=0>
      <thead>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Cedula</th>
        <th>Telefono</th>
        <th>Correo Electronico</th>
        <tr>
          <td class='phpcolor'>Huron</td>
          <td class='phpcolor'>SD</td>
          <td class='phpcolor'>1281</td>
          <td class='phpcolor'>100</td>
          <td class='phpcolor'>-30</td>
        </tr>
        <tr>
          <td class='phpcolor'>Rapid&nbsp;City</td>
          <td class='phpcolor'>SD</td>
          <td class='phpcolor'>3162</td>
          <td class='phpcolor'>106</td>
          <td class='phpcolor'>-30</td>
        </tr>
    </table>
  </body>

</html>

标签： javascripthtmlhtml-tabletxt

解决方案

一旦我把你的 txt 文件的内容变成object

您可以JSON使用简单的方法将文件转换为对象表示法，JSON.stringify(nameOfObject)并且使用以下方法更容易将其转换回对象JSON.parse(nameOfObject)

相反，我把 txt 文件变成

nombre=["Mario","Roberto"];
apellido=["Atencio","Icaza"];
cedula=["8-782-2289","8-582-2149"];
telefono=["233-7867","393-5517"];
correo=["matencio@misitio.com","ricaza@miweb.com"];

然后我把它变成一个对象

e.target.result.split('\n').forEach(a=>{
  eval('obj.'+a); //turns the txt file data into an object
});

现在至于完整的代码，看看

function CargarClientes(e) { 
  var obj={};
  var archivo = e.target.files[0];
  if (!archivo) {
    return;
  }
  var lector = new FileReader();
  lector.onload = function(e) { //table making
    e.target.result.split('\n').forEach(a=>{
      eval('obj.'+a); //turns the txt file data into an object
    });
    var myTable=document.createElement('table');
    myTable.cellPadding=0; myTable.cellSpacing=0;
    myTable.appendChild(document.createElement('thead'));
    
    for(var i=0; i<obj[Object.keys(obj)[0]].length; i++){
      myTable.tHead.appendChild(document.createElement('tr'));
    }
    Object.keys(obj).forEach(a=>{ //everything besides the "head"
      for(var i=0; i<myTable.tHead.childElementCount; i++){
        var myData=document.createElement('td');
        myData.innerText=obj[a][i];
        myData.className="phpcolor";
        myTable.tHead.childNodes[i].appendChild(myData);
      }
    });
    Object.keys(obj).forEach(a=>{ //the "head"
      var myData=document.createElement('th');
      myData.innerText=a;
      myTable.tHead.insertBefore(myData,myTable.tHead.childNodes[0]);
    });
    document.body.appendChild(myTable); //table placing
  };
  lector.readAsText(archivo);
}


document.getElementById('file-input').addEventListener('change', CargarClientes, false);
    table {
      width: 80%;
      border: 1px solid #fff;
      box-shadow: -18px -8px 20px #ccc;
      margin-left: 13%;
    }
    
    tr {
      width: 100%;
    }
    
    td {
      background: transparent;
      width: 10%;
      border-top: 1px solid #003;
      border-right: none;
      border-left: none;
      font: 62% Arial, Helvetica;
      padding: 6px;
      text-align: right;
    }
    
    th {
      font: 62% Arial, Helvetica;
      background: #8ADBFE;
      color: #FFFFFF
    }
    
    .phpcolor {
      text-align: center;
      background: #CBCBCB;
      color: #BDEBFE
    }
<input type="file" id="file-input" />
<h3>Contenido del archivo:</h3>
<pre id="contenido-archivo"></pre>

我有一个 repl https://repl.it/join/dofekwzf-paultaylor2以防它在这里不起作用

推荐阅读