0

Con Javascriptnecesito crear un boton con sus propiedades (id, que al hacer clicse ejecute una determinada función, y que tenga la clase btn-danger debootstrap). En cada iteracion del ciclofor quiero agregar ese boton al <td> de la tabla. De la forma que lo estoy haciendo no da resultado ya que ni siquiera se muestra el boton en la View. Aca les dejo el codigo de Javascript

 var tbody = document.querySelector('#tblLibros tbody');//aca le digo que los datos me los va a mostrar dentro de la etiqueta tbody de la tabla #tblLibros
        tbody.innerHTML = '';//limpio siempre el tbody para que cuando vuelva a hacer click en el boton llenar tabla, no me duplique los elementos
        //traigo el array guardado en el sessionStorage
        var id = JSON.parse(sessionStorage.getItem("arrayId"));
        var names = JSON.parse(sessionStorage.getItem("arrayNames"));//traigo los nombre del libro
        var cantNames = names.length;//calculo cuantos elementos tiene
        //creo el boton eliminar
        var button = document.createElement("button");
        button.id = "btnEliminar";
        button.addEventListener("click", myFunction, false);
        button.innerHTML = "Eliminar";

        for (var i = 0; i < cantNames; i++) {
            //crea una fila para cada nombre de libro
            var fila = document.createElement('tr');//aca creo la fila
            //crea las celdas para fila
            var celdaId = document.createElement('td');//celda para los id
            var celdaNames = document.createElement('td');//celda para nombres
            var celdaButton = document.createElement('td');//celda del boton eliminar
            //aca imprimo cada elemento de arrNames
            var nodoTextoId = document.createTextNode(id[i]);
            var nodoTextoNames = document.createTextNode(names[i]);
            var nodoButton = document.createTextNode(button);
            //agrega los items a las celdas correspondientes
            celdaId.appendChild(nodoTextoId);
            celdaNames.appendChild(nodoTextoNames);//le asigno a c/u de las celdas, el nombre del libro
            celdaButton.appendChild(nodoButton);
            //agrega c/u de las celdas a la fila
            fila.appendChild(celdaId);
            fila.appendChild(celdaNames);
            fila.appendChild(celdaButton);
            //asigna las filas al tbody de la tabla
            tbody.appendChild(fila);
        }

        //guarda el tbody en un una sessionStorage
        sessionStorage.setItem('tabla', $("#tblLibros tbody").html())
    }

Aca funcion que muestra el` tbody

 function showTbodyTable() {

        $("#tblLibros tbody").append(sessionStorage.getItem('tabla'));
    }

2 respuestas 2

1

Puedes hacer un each para realizar el ciclo, de la siguiente manera

funciont myFuncion(){
  var table = '<table cellspacing="0" width="100%" class="table table-hover table-bordered "><thead><tr><th scope="col">Campo 1</th><th scope="col">Campo2</th></tr></thead><tbody><tr></tr>';

    $.each( jsonData, function( index,asignacion){

            table += '<tr>';
            table += '<td><button class="boton1 btn" id="'+asignacion.id+'">Boton1</button></td>';
            table += '<td><button class="boton2 btn" id="'+asignacion.id+'">Boton2</button></td>';
            table += '</tr>';

          });

    table += '</tbody></table>';
        $('div#miDiv').html(table);
}

Almacenas en la variable table las reiteraciones del <td> y al final lo colocas en un div. Usas el objeto, en este caso, asignacion para acceder a los elementos del json que necesites.

1
  • Gracias @Jack por responder!. Mi idea es solucionarlo con respecto a mi código ya que tengo la estructura armada, solo necesitaría agregar el botón a la celda creada en el for llamada "celdaButton".
    – Claudio
    Commented el 4 mar. 2020 a las 19:12
0

LO SOLUCIONE DE ESTA FORMA:

Para agregar el boton con sus propiedades, primero hice la tabla con Javascript de esta forma y ademas la muestro en un div .

//************************creacion de tabla***********************************//

        var table = '<table cellspacing="0" width="100%" class="table table-hover table-bordered"><thead bgcolor="#2E4053"><tr><th scope="col" style="color:#ECF0F1">Libros 

seleccionados</th><th scope="col" style="color:#ECF0F1">Accion</th></tr></thead><tbody><tr></tr>';

        for (var i = 0; i < cantNames; i++) {

            table += '<tr>';
            table += '<td>' + names[i] + '</td>';
            //Aca agrego el boton eliminar
            table += '<td><button class="btn btn-danger" id="btnEliminar"'+" value="+ idBook[i] +"'>Eliminar</button></td>";
            table += '</tr>';
        };

        table += '</tbody></table>';

//************************Fin creacion de tabla*******************************//

        $('#miDiv').html(table);//muestra la tabla en el div #miDiv

        //guarda la tabla en una sessionStorage
        sessionStorage.setItem('tablaSeleccionados', table);

Y aca muestro el .cshtml con el divdonde va a mostrarse la tabla

<div id="table-wrapper">
    <div id="table-scroll">
        <div id="miDiv"></div> @*div donde va a mostrarse la tabla*@
    </div>
</div>

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.