Con Javascript
necesito crear un boton
con sus propiedades (id
, que al hacer clic
se 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'));
}