0

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.

2 respuestas 2

0

El problema que veo a simple vista es que en el boton editar no tienes ningún listener en cambio en el eliminar si, prueba a crear como tienes en el boton de eliminar botonEliminar.addEventListener("click",eliminarTareaAlerta); y dentro del método comprueba que te llega el valor que quieres.Un saludo

1
  • Muchas gracias por tu pronta respuesta finalmente lo resolví como me comentastes. Simplemente he creado la función //funcion que muestra el modal editar tareas function editarTareas(){ const elem = document.getElementById('#editarTasca'); const instance = M.Modal.init(elem); instance.open(); }
    – miki
    Commented el 2 ene. 2022 a las 18:23
0

Finalmente he resuelto el problema creando una función:

    //funcion que muestra el modal editar tareas
function editarTareas(){

const elem = document.getElementById('#editarTasca');
const instance = M.Modal.init(elem);
instance.open();
}

después desde el botón creado llamo a la función.

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>"; 
botonEditar.getElementById=("btn-editar");
botonEditar.addEventListener("click", editarTareas);

Así logro que se abra la ventana modal. Estoy aprendiendo, si alguien conoce otra forma más correcta de hacerlo agradecería su colaboración. Un saludo,

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.