estoy intentando crear una web app con app script y materialize. He creado un botón dentro de una tabla estática en html con clases materialize para darle estilo y abre una ventana modal.
<table class="striped responsive-table">
<thead id="table-head">
<tr>
<th>N. RT</th>
<th>Responsable</th>
<th>Prioritat</th>
<th>Ubicació</th>
<th>Tipus d'incidència</th>
<th>Descripció incidència</th>
<th>Data</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>N. RT</td>
<td>Responsable</td>
<td>Prioritat</td>
<td>Ubicació</td>
<td>Tipus d'incidència</td>
<td>Descripció incidència</td>
<td>Data</td>
<td><button id= "btn-editar" class="waves-effect waves-light btn-small btn modal-trigger" data-toggle ="modal" data-target="#editarTasca"><i class="material-icons right">edit</i>Editar</button></td>
<td><button class="waves-effect waves-light btn-small" id="btn-eliminar-tasca"><i class="material-icons right">delete</i>Eliminar</button></td>
</tr>
</tbody>
</table>
Así funciona perfecto, abre la ventana modal sin problemas. Me interesa crear la tabla dinámica y acompañar a cada fila con un botón editar y otro eliminar.
Para crear los botones con los datos de la tabla utilizo el siguiente código:
function mostrarTareasPendientes(dataT){
console.log(dataT);
const tbody = document.getElementById("table-body");
//Vaciamos la tabla antes de crearla
tbody.innerHTML=" ";
dataT.forEach(function(r){
const row = document.createElement("tr");
const col1 = document.createElement("td");
col1.textContent = r[0];
const col2 = document.createElement("td");
col2.textContent = r[1];
const col3 = document.createElement("td");
col3.textContent = r[2];
const col4 = document.createElement("td");
col4.textContent = r[3];
const col5 = document.createElement("td");
col5.textContent = r[4];
const col6 = document.createElement("td");
col6.textContent = r[5];
const col7 = document.createElement("td");
col7.textContent = r[6];
const tdBotonE = document.createElement("td");
const botonEditar = document.createElement("button");
botonEditar.setAttribute = ("type","button");
botonEditar.className=("waves-effect waves-light btn-small btn modal-trigger");
botonEditar.setAttribute=("data-toggle" ,"modal")
botonEditar.setAttribute = ("data-target","#editarTasca");
botonEditar.textContent = "Editar ";
const iEditar= document.createElement("span");
iEditar.className="material-icons right";
iEditar.innerHTML = "<span>edit</span>";
//Boton Eliminar
const tdBotonB = document.createElement("td");
const botonEliminar = document.createElement("button");
botonEliminar.className="waves-effect waves-light btn-small red";
botonEliminar.textContent = "Eliminar ";
const iEliminar= document.createElement("span");
iEliminar.className="material-icons right";
iEliminar.innerHTML = "<span>delete</span>";
botonEliminar.getElementById=("btn-eliminar-tasca");
botonEliminar.addEventListener("click",eliminarTareaAlerta);
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);
row.appendChild(col5);
row.appendChild(col6);
row.appendChild(col6);
row.appendChild(col7);
botonEditar.appendChild(iEditar);
tdBotonE.appendChild(botonEditar);
row.appendChild(tdBotonE);
botonEliminar.appendChild(iEliminar);
tdBotonB.appendChild(botonEliminar);
row.appendChild(tdBotonB);
tbody.appendChild(row);
});
}
Logro hacer funcionar el botón de eliminar que me lanza una alerta pero no el de editar. La consola me muestra el siguiente error: materialize.min.js:6 Uncaught TypeError: Cannot read properties of null (reading 'M_Modal') at HTMLBodyElement.value (materialize.min.js:6) value @ materialize.min.js:6
Tengo inicializado materialize para este botón de la siguiente manera:
// ventana modal
var mod = document.querySelectorAll('.waves-effect waves-light btn-small btn modal-trigger');
var instances = M.Modal.init(mod);
Pero aún así no me funciona.
Muchas gracias por vuestras respuestas. Un saludo.