Quiero generar una tabla (única) a partir de múltiples áreas de texto. La idea es llenar la primera columna del primer área de texto, la segunda columna del segundo área de texto y lo mismo para la tercera (pero al final, todos los datos deben formar parte de la misma tabla (en diferentes filas) )

Probé este script:

<script>
function generateTable() {
    var data = $('textarea[name=excel_data1]').val(); console.log(data);
    var rows = data.split("\n");
    var table = $('<table />');

for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);
}

$('#excel_table1').html(table);
}
</script>

Ese es mi "cuerpo" con las áreas de texto en divs:

  <div id=references>   <p>FI/ND:</p>
<textarea name="excel_data1" style="width:100px;height:20px;"></textarea> 
         </div>

  <div id=adresses>   <p>Adresses:</p>  
<textarea name="excel_data2" style="width:200px;height:20px;"></textarea>
         </div>

  <div id=more>   <p>(more:)</p>  
<textarea name="excel_data3" style="width:100px;height:20px;"></textarea>
         </div>
      <br>
<input id=bouton1 type="button" onclick="javascript:generateTable()" value="generate table"/>


Y esa es la tabla generada en un cuerpo diferente:

<p>Table:</p>
   <div id="excel_table1"></div>

</center></body>

Funciona perfectamente desde un área de texto, pero no puedo hacer que funcione desde múltiples áreas de texto.

¿Alguien puede ayudar? gracias por adelantado :)

(lo siento, no soy un hablante nativo de inglés)

P.S .: Intenté copiar el script dos veces, solo cambié el nombre de las áreas de texto, pero luego el primer área de texto dejó de funcionar:

<script>       
  function generateTable() {

    $('textarea[name=excel_data1]').each(function(){

      var data = $(this).val(); console.log(data);
      var rows = data.split("\n");
      var table = $('<table />');

        for(var y in rows) {
            var cells = rows[y].split("\t");
            var row = $('<tr />');
            for(var x in cells) {
                row.append('<td>'+cells[x]+'</td>');
            }
            table.append(row);
        }
        $('#excel_table1').html(table);

    })

}

function generateTable() {

    $('textarea[name=excel_data2]').each(function(){

      var data = $(this).val(); console.log(data);
      var rows = data.split("\n");
      var table = $('<table />');

        for(var y in rows) {
            var cells = rows[y].split("\t");
            var row = $('<tr />');
            for(var x in cells) {
                row.append('<td>'+cells[x]+'</td>');
            }
            table.append(row);
        }
        $('#excel_table1').html(table);

    })

}      
</script>
1
EnjoyLife 20 abr. 2020 a las 16:15

2 respuestas

Debes procesar de una manera diferente. Por ejemplo: 1. bucle en cada elemento de texto (es muy simple con jQuery) - obtenga el contenido - agregue el contenido en una fila (etiqueta) 2. construya la tabla final y agregue donde desee.

Puedes probar este script:

<script>

var rows = "", table = "", name_attr = "";
$("textarea").each(function (){
    name_attr = ""+$(this).attr('name');
// Here we check that we only processed textarea with name attributes like  excel_data1, excel_data2, etc ...
    if (name_attr.includes("excel_data"))
        rows += "<tr><td>"+$(this).val()+"</td></tr>";
});
table = "<table>"+rows+"</table>";
$('#excel_table1').html(table);

</script>
0
Lionelsan 20 abr. 2020 a las 13:43

Básicamente, debe repetir lo que está haciendo para todas las áreas de texto, para que pueda tener algo como esto:

function generateTable() {

    $('textarea').each(function(){

      var data = $(this).val(); console.log(data);
      var rows = data.split("\n");
      var table = $('<table />');

        for(var y in rows) {
            var cells = rows[y].split("\t");
            var row = $('<tr />');
            for(var x in cells) {
                row.append('<td>'+cells[x]+'</td>');
            }
            table.append(row);
        }
        $('#excel_table1').html(table);

    })

}
0
Anurag Srivastava 20 abr. 2020 a las 13:29