0

Tengo una dificultad al agregar un evento a las imágenes que tengo dentro de una tabla para que ejecuten una función que mostrará una imagen modal al darle clic.

Tengo una tabla de productos de supermercado con varias columnas, con paginación y con barra de búsqueda hecha con bootstrap 5 y bootstrap-table, en una de las columnas muestro una imagen miniatura de cada producto. Intento hacer que las imágenes sea imágenes modales para que el usuario pueda ampliarlas siguiendo el ejemplo de w3schools, adaptándolo a mi aplicación.

El problema radica en que no logro agregar los EventListener desde JavaScript de una forma discreta (separando html y JavaScript).

Mi código html es el siguiente:

<div class="container">
<br/>
<div class="col-md-10 mx-auto" >

    <table class="table table-bordered table-hover text-center" 
       data-toggle="table" 
       data-pagination="true"
       data-page-size="5"
       data-search="true">
        <thead>
            <tr >
                <th data-width=300" >Nombre</th>
                <th data-width="150" >Cantidad</th>
                <th data-width="100" >Precio</th>
                <th  >Imagen</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($listaProductos as $producto){ ?>
            <tr>
                <td class="fs-5"> <?php echo $producto['nombre']; ?> </td>
                <td> <?php echo $producto['cantidad']; ?> </td>
                <td class="fw-bold" > $ <?php echo $producto['precio']; ?> </td>
                <td> 

                    <img class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>" style="width:105px;height:120spx;" >
                    
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

</div>

Como pueden ver, los elementos img que agrego con php dentro del la última columna de la tabla tendrán una clase en común y un id distinto cada uno.

En cuanto a mi código JavaScript con el que intento agregarles la función que hará todo acerca de la imagen modal, es el siguiente:

document.querySelectorAll(".myImg").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id "+id);
    
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption

    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
    modalImg.src = "imagenes/"+id;

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
  });
});

Y esto es lo que no me está funcionando. Ya verifiqué que el document.querySelectorAll(".myImg") esté obteniendo todas las img y sí lo hace. También estoy implementando el css correspondiente para que las imágenes tengan un grado de opacidad al pasar el cursor sobre ellas mediante la clase myImg, use está última implementación o no sigue sin funcionar. Tambien, como pueden ver, intento imprimir en consola del navegador para detectar la imagen seleccionada y nunca imprime nada.

Lo qué me funcionó fue colocar el evento y la función directamente en el html dentro de img como muestro aquí:

<img onclick="MostrarImg()" class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>" style="width:105px;height:120spx;" >

y la funcion MostrarImg de JavaScript queda de la siguiente manera, que como pueden ver, es practicamente lo mismo, salvo la forma en que obtengo el id del la imagen que originó el evento:

function MostrarImg(clicImg) {
    var eventoImg = clicImg || window.event;

    var id = eventoImg.target.getAttribute("id");

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption

    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
    modalImg.src = "imagenes/"+id;

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
}

A pesar de qué este último ejemplo es el que me funcionó, no es lo qué quiero en cuanto a implementación ya que quiero que quede en una forma de JavaScript discreto.

Otra cosa qué me funcionó fue colocar una clase al elemento table con la cual obtenerla a partir de document.querySelectorAll("clase") y agregarle el EventListener a todo elemento que contenga, pero el problema es que cuando cliqueo en cualquier cosa que no sea una imagen, también se lanza el modal pero sin imagen lol.

Agradecería qué alguien me pueda ayudar con esto. No veo dónde esté radicando el error al agregar el evento que lance la imagen modal a cada imagen en mi primer ejemplo.

15
  • Tienes dos errores tipográficos: 1) Te falta una comilla aqui: <th data-width=300" >Nombre</th> ... tiene que ser asi: <th data-width="300" >Nombre</th>... y luego no cierras el <div id="container"> al final del código mostrado (seguramente hay más código, lo digo por si acaso)... No se si tiene nada que ver con tu problema aun, pero de momento corrige eso
    – masterguru
    el 19 dic. 2021 a las 8:16
  • No entiendo esto: <img class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>... es decir, ¿le estas poniendo como id el nombre de la imagen? Aunque html5 lo permite no se si es buena idea, la verdad, es tu decisión (espero que los productos nunca compartan imagenes).
    – masterguru
    el 19 dic. 2021 a las 8:27
  • Otro trozo de código que no has pegado bien, o tienes mal, es el de javascript que empieza por document.querySelectorAll(, pues no lo cierras adecuadamente. Te falta esto al final para cerrar esa funcion: });... sigo mirando
    – masterguru
    el 19 dic. 2021 a las 8:28
  • Bueno, parece que eso es todo... puedes ver tu un ejemplo de tu código corregido y funcionando aqui: jsfiddle.net/p0b6tqoh (he tenido que retocar cosas, pero diria que mas o menos es lo que quieres)
    – masterguru
    el 19 dic. 2021 a las 8:32
  • Pulsa en editar y pon en el título cuál es el problema. Dado que tu planteamiento es extenso, es difícil entender de buenas a primeras el problema que estás teniendo. Lee Cómo preguntar.
    – padaleiana
    el 19 dic. 2021 a las 13:49

1 respuesta 1

0

El objetivo de mi duda era saber cómo agregar un evento clic a una columna de imágenes en una bootstrap-table para que se mostrara un modal con la imagen cliqueada a través de JavaScript discreto y, gracias a los comentarios, me di cuenta que bootstrap-table tiene su propia manera de manejar los eventos en sus tablas, pero, creo yo, no es una forma total de JavaScript discreto. Así que he encontrado básicamente tres maneras de lograr la funcionalidad que quiero y solo una es JS discreto.

1. Especificar el método a utilizar con el atributo onclick en cada elemento img dentro de la tabla:

function MostrarImg(clickImg) {

    var eventoImg = clickImg || window.event;
    var imagen = eventoImg.target.getAttribute("src");
    console.log("Se ha clickeado la imagen: "+imagen);

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption

    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
    modalImg.src = imagen;

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    //var span = document.getElementsByClassName("btn-close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

 }
body {font-family: Arial, Helvetica, sans-serif;}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
<html>
<head>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Bootstrap-Table -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">


<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- Bootstrap-Table -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-es-MX.js"></script>



</head>
<body>
<div class="container">
<br/>
<div class="col-md-10 mx-auto" >

    <table class="table table-bordered table-hover text-center" 
       data-toggle="table" 
       data-pagination="true"
       data-page-size="5"
       data-search="true">
        <thead>
            <tr >
                <th data-field="Nombre" data-width="300" >Nombre</th>
                <th data-field="Cantidad" data-width="150" >Cantidad</th>
                <th data-field="Precio" data-width="100" >Precio</th>
                <th data-field="Imagen" >Imagen</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($listaProductos as $producto){ ?>
            <tr>
                <td class="fs-5"> Nombre producto </td>
                <td> 10 </td>
                <td class="fw-bold" > $ 1000 </td>
                <td> 
                    
                    <img onclick="MostrarImg()" class="myImg" src="https://i.blogs.es/0142c8/beef-tongue-tacos-taquitos-de-lengua-fp/650_1200.jpg" style="width:105px;height:120spx;" >
                    
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

</div>
</div>
</body>
</html>

2. Implementar la manera en que Bootstrat-Table maneja los eventos agregando el nombre del método a utilizar con el atributo data-events en el elmento th de la columna de la tabla:

window.operateEvents = {
  'click .myImg': function (e) {
    const imagen = e.target.getAttribute("src");
    console.log("Se ha clickeado la imagen: "+imagen);

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption

    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

    modal.style.display = "block";
    modalImg.src = imagen;

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    //var span = document.getElementsByClassName("btn-close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

  }
}
body {font-family: Arial, Helvetica, sans-serif;}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
<html>
<head>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Bootstrap-Table -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">


<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- Bootstrap-Table -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-es-MX.js"></script>



</head>
<body>
<div class="container">
<br/>
<div class="col-md-10 mx-auto" >

    <table class="table table-bordered table-hover text-center" 
       data-toggle="table" 
       data-pagination="true"
       data-page-size="5"
       data-search="true">
        <thead>
            <tr >
                <th data-field="Nombre" data-width="300" >Nombre</th>
                <th data-field="Cantidad" data-width="150" >Cantidad</th>
                <th data-field="Precio" data-width="100" >Precio</th>
                <th data-field="Imagen" data-events="operateEvents" >Imagen</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($listaProductos as $producto){ ?>
            <tr>
                <td class="fs-5"> Nombre producto </td>
                <td> 10 </td>
                <td class="fw-bold" > $ 1000 </td>
                <td> 
                    
                    <img class="myImg" src="https://i.blogs.es/0142c8/beef-tongue-tacos-taquitos-de-lengua-fp/650_1200.jpg" style="width:105px;height:120spx;" >
                    
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

</div>
</div>
</body>
</html>

3. Esta tercer forma es la que cumple con la implementación de JS discreto, aunque haciendo más manipulaciones de las que se deberían y consiste en, mediante JS, obtener el elemento table a partir de su clase y agregarle los eventos click a todo elemento que se encuentre dentro de la tabla mediante el método addEventListener, al mismo tiempo que se especifica el método a llamar en el evento y en este filtrar los elementos img mediante su id, ya que son los únicos elementos que tienen id dentro de la tabla:

document.querySelectorAll(".clickk").forEach(el => {
  el.addEventListener("click", e => {
    
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id; " + id);

    if( id != null){

      // Get the modal
      var modal = document.getElementById("myModal");

      // Get the image and insert it inside the modal - use its "alt" text as a caption

      var modalImg = document.getElementById("img01");
      var captionText = document.getElementById("caption");

      modal.style.display = "block";
      modalImg.src = id;

      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];
      //var span = document.getElementsByClassName("btn-close")[0];

      // When the user clicks on <span> (x), close the modal
      span.onclick = function() {
        modal.style.display = "none";
      }
    }
  });
});
body {font-family: Arial, Helvetica, sans-serif;}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
<html>
<head>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Bootstrap-Table -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">


<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- Bootstrap-Table -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-es-MX.js"></script>



</head>
<body>
<div class="container">
<br/>
<div class="col-md-10 mx-auto" >

    <table class="table table-bordered table-hover text-center clickk" 
       data-toggle="table" 
       data-pagination="true"
       data-page-size="5"
       data-search="true">
        <thead>
            <tr >
                <th data-field="Nombre" data-width="300" >Nombre</th>
                <th data-field="Cantidad" data-width="150" >Cantidad</th>
                <th data-field="Precio" data-width="100" >Precio</th>
                <th data-field="Imagen" >Imagen</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($listaProductos as $producto){ ?>
            <tr>
                <td class="fs-5"> Nombre producto </td>
                <td> 10 </td>
                <td class="fw-bold" > $ 1000 </td>
                <td> 
                    
                    <img class="myImg" id="https://i.blogs.es/0142c8/beef-tongue-tacos-taquitos-de-lengua-fp/650_1200.jpg" src="https://i.blogs.es/0142c8/beef-tongue-tacos-taquitos-de-lengua-fp/650_1200.jpg" style="width:105px;height:120spx;" >
                    
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

</div>
</div>
</body>
</html>

En este caso lo ideal sería solo agregar el evento a los elementos img y no a todo lo que esté dentro de la tabla, pero he aquí lo que tarde en darme cuenta, que bootstrap-table no lo permite directamente.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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