1

Saludo compañeros, llevo dias intentando modificar el contenido de una celda al presionar un boton que esta en la misma fila... introducir la descripción de la imagen aquí

quiero cambiar el texto de la columna observacion cuando presiono el boton de SI o NO ayuda...

este mi codigo de la tabla [![introducir la descripción de la imagen aquí][2]][2]

 <tbody id="myTable">
                <?php
                mysqli_set_charset($conexion, "utf8");
                //Generamos consulta.
                $sql = "SELECT  concat(a.nombre, ' ', a.Apellido), Seccion, r.IdRegistro
                        From registro r
                        INNER JOIN alumno a  on r.Identidad_Alumno = a.Identidad
                        where  IdGrado = '$grado' and IdModalidad = '$modalidad' and Seccion ='$seccion' and Anio = '$anio'";
                $result = mysqli_query($conexion, $sql);
                while ($ver = mysqli_fetch_row($result)) {
                    $datos =  $ver[0] . "||" .
                        $ver[1];
                    ?>
                <tr>
                    <td> <?php echo $ver[0] ?> </td>
                    <td hidden><?php echo $ver[2] ?></td>

                    <td>
                        <button type="button" class="btn btn-success" onclick="asiste()" id="si">SI</button>
                        <button type="button" class="btn btn-danger" onclick="inasiste()" id="no">NO</button>
                    </td>
                    <td id="des">Realizar Asistencia</td>
                </tr>
                <?php
                }
                ?>
            </tbody>
5
  • Podrías indicar tu código html al menos. Commented el 21 ago. 2019 a las 3:25
  • dame un momento
    – Said Omar
    Commented el 21 ago. 2019 a las 3:28
  • he intentado de muchas maneras y no logro hacerlo ayudaa
    – Said Omar
    Commented el 21 ago. 2019 a las 3:32
  • Por favor publicá tu código como texto, no como imagen.
    – azeós
    Commented el 21 ago. 2019 a las 4:03
  • quiero generar una funcion para que cambiar el texto de la columna observacion cuando presione el boton si o no
    – Said Omar
    Commented el 21 ago. 2019 a las 4:12

2 respuestas 2

1

no te compliques, casi lo tienes, lo unico que debes hacer teniendo en cuenta que en el While del PHP que nos muestras generas tu tabla es:

  • A cada <td class="observacion"> tiene que agregarle un ID, este debe ser unico, por ejemplo podria ser el ID de la tabla (PK)
  • En el elemento <td> donde pones los button asignas una funcion, cierto?, pues a esta funcion debes pasarle como parametro un ID, por ejemplo quedaria algo asi: onclick="asiste(1112)"

Hasta aquí la explicación, ahora un pequeño ejemplo, los ID me los invento, es cosa tuya decidir de donde sacarlos o que poner.
Yo lo sacare de la query, suponiendo que existe el campo ID
Por mi comodidad usare JQuery.


Ejemplo

<tbody id="myTable">
   <?php
      mysqli_set_charset($conexion, "utf8");
      $sql = "SELECT  concat(a.nombre, ' ', a.Apellido), Seccion, r.IdRegistro, a.id From registro r INNER JOIN alumno a  on r.Identidad_Alumno = a.Identidad where  IdGrado = '$grado' and IdModalidad = '$modalidad' and Seccion ='$seccion' and Anio = '$anio'";
      $result = mysqli_query($conexion, $sql);
      while ($ver = mysqli_fetch_row($result)) {
         $datos =  $ver[0] . "||" . $ver[1];
   ?>
    <tr>
       <td> <?php echo $ver[0] ?> </td>
       <td hidden><?php echo $ver[2] ?></td>    
       <td>
           <button type="button" class="btn btn-success" onclick="asiste('div<php? echo $ver[3] ?>')" id="si">SI</button>
           <button type="button" class="btn btn-danger" onclick="inasiste('div<php? echo $ver[3] ?>')" id="no">NO</button>
       </td>
       <td id="div<php? echo $ver[3] ?>">Realizar Asistencia</td>
    </tr>
    <?php
      }
    ?>
 </tbody>

JS

function asiste(id){
   $("#"+id).html("Necesita asistencia...");
}

function inasiste(id){
   $("#"+id).html("No necesita asistencia...");
}

Espero te sirva. Suerte!

2
  • me funcionó tu idea, y lo apliqué a otras propiedades de las celdas
    – Said Omar
    Commented el 22 ago. 2019 a las 23:40
  • Genial, si te sirvió como respuesta recuerda marcarla como solucion
    – Srsole
    Commented el 23 ago. 2019 a las 5:19
0

No veo necesario que lo que tengas que editar en la columna obvervaciones dependa de dar click en los botones, si no podrías hacerlo directamente desde esa casilla, recreandolo parecido a esto:

// target a los inputs con la clase observacion
// usando spread operator para hacerlo iterable(ES6 feature)
const $inputs = [...document.getElementsByClassName('observacion')]

// listener al evento click de cada input
// para recobrar el borde y remover readonly (mientras se edita)
$inputs.forEach(i => {
  i.addEventListener('click', function() {
    this.style.border = 'inherit'
    this.removeAttribute('readonly')
  })
})

// listener al evento blur de cada input
// para volver a quitar el border cuando se sale del focus del input
// y volver a darle el attributo readonly
$inputs.forEach(i => {
  i.addEventListener('blur', function() {
    this.style.border = 'none'
    this.setAttribute("readonly", true);
  })
})
.observacion {
  border: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">nombre</th>
        <th scope="col">asistencia</th>
        <th scope="col">observación</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mark</td>
        <td>
          <button class="btn btn-success">SI</button>
          <button class="btn btn-danger">NO</button>
        </td>
        <td class="observacion"><input type="text" class="observacion" readonly value="foo"></td>
      </tr>
      <tr>
        <td>Jacob</td>
        <td>
          <button class="btn btn-success">SI</button>
          <button class="btn btn-danger">NO</button>
        </td>
        <td><input type="text" class="observacion" readonly value="bar"></td>
      </tr>
    </tbody>
  </table>
</div>

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.