Take data from a textarea and fill HTML table

Question

Good afternoon, I’m racking my brain to fix this, someone could help?

I have a textarea in which the user will paste the data from an excel spreadsheet, the data enter 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 take 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 the respective columns, if I place a row only in the textarea, it works, if I put more than one I don’t know how I do to 'break' the row in the table. Follow 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);

Answer 1

When you do:

var retorno = valor.split("   ");

You are considering all the content of the textarea as just one line. Even if you have more rows, your code will understand as multiple columns. The correct would be first to get all the lines of the textarea, then to divide into columns, that is, first to do split("\n") to get the lines and then split(" ") to get the columns of each row.

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>

<textarea id="texto">
10   produto1     1  3

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

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