0

Boa tarde, estou quebrando a cabeça para resolver isso, alguém poderia ajudar?

Eu tenho um textarea na qual o usuário vai colar os dados de uma planilha do excel, os dados entram da seguinte forma:

10  | produto1 |    1 | 3

20  | prodto2  |    2 | 4

Esses pipes não vão no textarea coloquei para separar melhor aqui

eu pego esses dados e uso o split() para retirar os espaços e guardar os dados em um array.

Depois disso eu quero inserir esses dados em uma tabela, com as respectivas colunas, se eu coloco uma linha só no textarea, funciona, se eu coloco mais de uma eu não sei como eu faço para 'quebrar' a linha na tabela. Segue meu script abaixo:

    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);
1
  • Se tu colocar uma linha só no textarea, dá certinho na tb, mas se tu colocar mais de uma linha, não funciona mais? O que acontece? fica tudo em uma linha só? Ou você não sabe no array quando é um novo registro? Tipo um registro de uma nova linha do textarea?
    – Aline
    Commented 4/05/2017 às 20:50

1 Resposta 1

1

Quando você faz:

var retorno = valor.split("   ");

Você está considerando todo o conteúdo da textarea como sendo apenas uma linha. Mesmo se possuir mais linhas, seu código entenderá como múltiplas colunas. O correto seria primeiro você obter todas as linhas da textarea, para depois dividir em colunas, isto é, primeiro fazer split("\n") para obter as linhas e depois split(" ") para obter as colunas de cada linha.

Veja o código abaixo:

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>

1
  • baah, funcionou certinho, muito, muito obrigado! Quebrou um galhão, começando agora com JS, valeeeeeu <3 Commented 4/05/2017 às 22:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .