0

Quiero insertar el código html generado a través de JQuery para que el usuario pueda obtener y copiar ese código, pero no logro hacer que se muestre dentro de el id #resultado_codigo . Creo que he llegado a conseguir algo, pero no encuentro como insertar ese resultado en ese div.

 
 $( document ).ready(function() {   

    $("#generar").click(function(){

            var num_filas = $("#filas").val();
            var num_columnas = $("#columnas").val();
 
 $("#resultado_tabla").append("<table id='mi_tabla'>");
        
        for (var i = 0; i < num_filas; i++) 
       
        $("#resultado_tabla table").append("<tr>");

            for (var j = 0; j < num_columnas; j++) 
        
        $("#resultado_tabla tr").append("<td>");
        
        
        console.log($("#mi_tabla").html($("#resultado_codigo")));
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <label>Filas</label><br>
                <input type="number" id="filas" class="numeros"><br>
         
                <label>Columnas</label><br>
                <input type="number" id="columnas" colspan="2" class="numeros">
                <input type="button" value="Generar" id="generar">


<div id="resultado_tabla"></div>

<div id="resultado_codigo"></div>

2
  • Hola Azumay404, bienvenido! Te he incluido una refactorización del js porque no me funcionaba. No sé si es necesaria o solamente necesitabas la respuesta para imprimir el resultado. Indícame si prefieres que excluya el js retocado, ok? :-) Yo lo he testeado en un fiddle y me funciona bien. Saludos! Commented el 2 feb. 2020 a las 20:45
  • Muchas gracias! Así esta perfecto, gracias por tu ayuda!
    – Azumay404
    Commented el 2 feb. 2020 a las 22:47

1 respuesta 1

4

Podrías usar la función text():

$("#resultado_codigo").text(resultado); //resultado contendría el html previamente generado.

Por ejemplo:

var resultado = $("#resultado_tabla").html();
$("#resultado_codigo").text(resultado);

Si también quieres mostrarlo en consola:

 var resultado = $("#resultado_tabla").html();
 $("#resultado_codigo").text(resultado);
 console.log(resultado);

Por otro lado, creo que tu código no genera la tabla correctamente. Lo he refactorizado así:

De este modo puedes imprimir en cualquier momento el html que generas por consola o el medio que prefieras, y se ejecuta sin errores generando la tabla:

Tu javascript refactorizado:

function generar(){

    var num_filas = $("#filas").val();
    var num_columnas = $("#columnas").val();
    var markup ="<table>";     

    for (var i = 0; i < num_filas; i++) {
      markup += "<tr>";

        for (var j= 0; j < num_columnas; j++) {
          markup += "<td>"+(j+1)+"</td>";
          //he añadido aquí el cierre de cada columna
        }

      markup += "</tr>";
      //aquí he añadido el cierre de las filas
    }

    markup += "</table>";  //cierre de la tabla
    $("#resultado_tabla").append(markup);
    var resultado = $("#resultado_tabla").html();
    $("#resultado_codigo").text(resultado);
    console.log(resultado);

 };

Pequeño cambio en el html del botón para llamar la función:

<input type="button" value="Generar" id="generar" onclick="generar();">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.