0

Estoy haciendo una tabla que muestra lo que hay en la base de datos, tengo que 2 mediumtext que al visualizarse adentro de la tabla, se agranda muchísimo, necesito saber como con js/ajax y css podría hacer esta ventana y que muestre el contenido completo este es mi codigo:

<?php 
include('con_db.php');
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/mostrarDatos.css">
</head>
<body>

    <table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Texto1</th>
      <th>Texto2</th>
      <th>Fecha</th>
    </tr>
  </thead>
  <tbody>

   <?php 
        
        $verSql = "SELECT * from usuarios";
        $result = mysqli_query($conexion, $verSql);
        
       ?>
   <?php 
  while ($verDatos = mysqli_fetch_array($result)) {
      
      ?>

    <tr class="tabla">
      <td><strong><?php echo $verDatos['id'];?></strong></td>
      <td><?php echo $verDatos['nombre']; ?></td>
      <td  class="flex1"><?php echo $verDatos['texto1']; ?></td>
      <td  class="flex2"><?php echo $verDatos['texto2']; ?></td>
      <td><?php echo $verDatos['fecha']; ?></td>
    </tr>
    

<div class="muestraTexto1">

  <p><?php echo $verDatos['texto1'];?></p>

</div>

<div class="muestraTexto2">

  <p><?php echo $verDatos['texto2'];?></p>

</div>

    

    
  <?php } ?>
  </tbody>
</table>

<script src="js/mostrarDatos.js"></script>
</body>
</html>

// js //

let texto1 = document.querySelector('.flex1');

texto1.addEventListener('click', ()=>{
    
     
   document.querySelector('.muestraTexto1').style.display = 'block';
   
});



let texto2 = document.querySelector('.flex2');



texto2.addEventListener('click', ()=>{
    
     
   document.querySelector('.muestraTexto2').style.display = 'block';
   
});

// CSS

.muestraTexto1{
    display: none;
    max-width: 400px;
    height: 300px;
    background: green;

}

.muestraTexto2{
    display: none;
    max-width: 400px;
    height: 300px;
    background: green;

}

Me abre los solo los textos de el primer dato o sea ID: 1 , no se como trasmitirlo a los otros elementos que se generan con el bucle de en php, busque un montón y no encuentro esto, tendría que usar si o si Ajax? perdón por mi ignorancia

2
  • Quieres hacerlo como una ventana modal?
    – Krieger
    Commented el 10 may. 2022 a las 18:17
  • exactamentee!!! Commented el 10 may. 2022 a las 21:47

1 respuesta 1

0

Podrías hacer que al principio se muestren el texto1 y texto2 con puntos suspensivos, dándole el estilo de la clase .flex a ambos <div> que dejé en los <td>.

  • PHP/HTML
 <!-- VENTANA MODAL INVISIBLE -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="muestra_texto">
     <!-- aqui se cargará el texto completo --> 
    </p>

  </div>

</div>



...
<td >
 <div id="texto1" class="flex" onclick="abre_modal(this.id)"><?php echo $verDatos['texto1']; ?></div>
</td>

<td>
 <div id="texto2" class="flex" onclick="abre_modal(this.id)"><?php echo $verDatos['texto2']; ?></div>
</td>
...
  • CSS
.flex {
       width: 230px;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden; 
}
.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.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
  • JS
// Obtiene el modal
var modal = document.getElementById("myModal");

function abre_modal(id){
  modal.style.display = "block";
  document.getElementById("muestra_texto").innerHTML = document.getElementById(id).textContent;
}

// obtiene el <span> que cierra el modal
var span = document.getElementsByClassName("close")[0];


// Cuando clickees en el <span> (x), cerrará el modal y limpiara muestra_texto
span.onclick = function() {
  modal.style.display = "none";
  document.getElementById("muestra_texto").innerHTML ="";
}

// Cuando clickees fuera del modal, se cerrará y se limpiara el muestra_texto
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    document.getElementById("muestra_texto").innerHTML ="";
  }
}

Entonces con el onclick que le dejé, podrás abrir el modal cargando el texto de los td en el mismo modal.

Apliqué lo de este enlace https://www.w3schools.com/howto/howto_css_modals.asp

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.