Get data from a textarea and populate HTML table

Question

Get data from a textarea and populate HTML table

Navigation

#1 by (1 votes)

0

Good afternoon, I'm breaking my heart to solve this, could anyone help?

I have a textarea in which the user will paste the data from an excel spreadsheet, the data comes in as follows:

10  | produto1 |    1 | 3

20  | prodto2  |    2 | 4

These pipes do not go in the textarea I put to separate better here

I get this data and use split () to remove the spaces and save the data in an array.

After that I want to insert this data into a table, with its columns, if I put a line only in the textarea, it works, if I put more than one I do not know how I do to 'break' the row in the table . Here's my script below:

    addItens = function() {

      var valor = document.getElementById('texto').value;
      var retorno = valor.split("   ");
      var newRow = $("<tr>");
      var cols = "";
      for(i = 0; i < retorno.length; i++)
        {
            cols += '<td>'+retorno[i]+'</td>';
        } 
          cols += '<td class="actions">';
          cols += '<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>';
          cols += '</td>';
          newRow.append(cols);

          $("#products-table").append(newRow);

          return false;

  };

})(jQuery);

javascript jquery html5

asked by anonymous 04.05.2017 / 22:36

1 answer

Month and Year Datepicker Post in Form with Dynamic Fields

score 1 · Accepted Answer

When you do:

var retorno = valor.split("   ");

You are considering all textarea content to be just one line. Even if you have more rows, your code will look like multiple columns. The correct one would be to get all the lines of the textarea first, then divide them into columns, ie first make split("\n") to get the lines and then split(" ") to get the columns of each line.

See the code below:

function addItens () 
{
  // Elemento textarea:
  const texto = $("#texto");
  
  // Elemento table:
  const table = $("#products-table");
  
  // Divide o conteúdo de textarea em linhas:
  let linhas = texto.val().split("\n");
  
  // Percorre todas as linhas:
  for (i in linhas)
  {
    // Verifica se a linha não está vazia:
    if (linhas[i])
    {
      // Divide o conteúdo da linha em colunas:
      let retorno = linhas[i].split(" ");
      
      // Cria uma nova linha na tabela:
      let newRow = $("<tr>");
      
      // Percorre todas as colunas:
      for (j in retorno)
      {
        // Verifica se a coluna não está vazia:
        if (retorno[j])
        {
          // Cria a nova coluna na tabela:
          let newCol = $("<td>");
          
          // Adiciona o conteúdo na coluna:
          newCol.html(retorno[j]);

          // Adiciona a coluna na linha:
          newRow.append(newCol);
        }
      }
      
      // Cria a coluna de ação:
      let action = $("<td>");
      
      // Adiciona a classe "actions":
      action.addClass("actions");
      
      // Adiciona o botão Remover à coluna de ação:
      action.html('<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>');
      
      // Adiciona a coluna na linha:
      newRow.append(action);
      
      // Adiciona a linha na tabela:
      table.append(newRow);
    }
  }
}

textarea {
  display: block;
  margin-bottom: 10px;
  width: 400px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textareaid="texto">
10   produto1     1  3

20   prodto2      2  4
</textarea>
<button id="enviar" onclick="addItens()">Enviar</button>

<table id="products-table" border="1"></table>