2

Buenas, tengo un problema, se visualizan varios botones y pulse el que pulse, sólo me reconoce el primer ID. ¿Podría alguien ayudarme? Muchas gracias.

...
if($rs->num_rows>0){
    while($fila=$rs->fetch_object()){
        $html.= "<tr>";
        $html.= "<td><input type=\"text\" name=\"orden\" value=\"$fila->docu_orden\" size=\"1\"></td>";
        $html.= "<td>$fila->docu_titulo</td>";
        $html.= "<td><div id=\"operaciones\"><input type=\"button\" name=\"opera\" class=\"operacion\" id=\"operacion\" style=\"border:none; background-color:transparent;\" value=\"".$fila->docu_id."\" onclick=\"operaciones(this);\"/></div>";
        $html.= "<div id=\"ocultar\" style=\"display:none;\"><input type=\"button\" name=\"$fila->docu_id\" id=\"ocult\" style=\"border:none; background-color:transparent;\" value=\"".$fila->docu_id."-Ocultar\" onclick=\"ocultar(this);\"/></div></td>";
        $html.= "</tr>";

...

<script>
function operaciones(botones){
    var oc = document.getElementById("ocultar");
    var val=$(".operacion").attr("id");
    alert(val);
        oc.style.display = "block"; 
        op.style.display = "none";
}
</script>
6
  • Hola Sara, podrías darle un poco más de formato a la pregunta? Está difícil leer el código. el 16 ene. 2018 a las 12:17
  • Si declaras la variable así: var val=this.id; te dará el id del elemento que fue clickeado. Aunque no lo dices de forma explícita, se puede deducir que es eso lo que quieres.
    – A. Cedano
    el 16 ene. 2018 a las 12:22
  • Son varios botones con distinto ID, al pulsar uno, me tendría que aparecer el botón de ocultar en el botón que corresponde (el que he pulsado), pero no es así, sólo me muestra el del primer ID, por lo tanto sólo aparece el botón ocultar en el primer botón, aunque haya pulsado otro de operación que no haya sido el primero. Gracias
    – Sara
    el 16 ene. 2018 a las 12:24
  • A.Cedano, ya probé val=this.id y al visualizarlo con el alert, sí me reconoce el ID del botón pulsado, pero aún así, el botón ocultar me sigue apareciendo en la primera posición, no en la pulsada. Gracias!!
    – Sara
    el 16 ene. 2018 a las 12:25
  • Sara ¿podrías explicar por favor lo que debe hacer el código, el resultado que esperas, editando la pregunta?.Por ejemplo en tu comentario das otros detalles que pueden ser interesantes para una respuesta más adecuada. Sin conocer el contexto es difícil responder satisfactoriamente. Por ejemplo, tú usas una variable: op.style.display = "none"; que no se sabe de dónde viene. No se sabe qué es lo que quieres lograr con el código posterior, etc.
    – A. Cedano
    el 16 ene. 2018 a las 12:26

2 respuestas 2

1

Dado que en el onClick estas pasando el this esas pasando todo el elemento como referencia, asique dentro del metodo solo tendrias que hacer referencia al objeto que te llega como parametro.

function operaciones(botones){

    var idRow=$(botones).attr("id");
    var valRow=$(botones).val();
    //Mostramos boton ocultar
    $(botones).parent().next().css("display","block");
    //Ocultamos boton operacion
    $(botones).parent().css("display","none");
    alert(valRow);

}

Ademas, date cuenta que estas creando filas en un bucle while, asignándole el mismo id a cada uno de los botones de cada fila, lo cual no es buena practica, pues nunca se deben repetir el atributo id en ningún elemento HTML

3
  • voy a probar. Muchísimas gracias por vuestras respuestas
    – Sara
    el 16 ene. 2018 a las 12:27
  • Funciona!! muchísimas gracias :)
    – Sara
    el 16 ene. 2018 a las 12:30
  • Me alegra haberte ayudado! No olvides marcarla como aceptada si te funciono :)
    – Hictus
    el 16 ene. 2018 a las 12:31
1

La solución de Hictus es correcta y funciona, pero no trata la verdadera causa del problema: cuando hay más de un registro en el resultset, vas a acabar con IDs repetidos. Eso va a crear problemas al seleccionar elementos (y en particular, el problema que ves): al hacer una selección por id, el navegador va a devolverte el primer elemento que tenga ese ID, aunque haya varios y no hayas pulsado en el primero.

Ésta es la línea problemática en JS:

var oc = document.getElementById("ocultar");

Y estas son las líneas problemáticas en el PHP:

...
    $html.= "<td><div id=\"operaciones\"><input type=\"button\" name=\"opera\" class=\"operacion\" id=\"operacion\" style=\"border:none; background-color:transparent;\" value=\"".$fila->docu_id."\" onclick=\"operaciones(this);\"/></div>";
    $html.= "<div id=\"ocultar\" style=\"display:none;\"><input type=\"button\" name=\"$fila->docu_id\" id=\"ocult\" style=\"border:none; background-color:transparent;\" value=\"".$fila->docu_id."-Ocultar\" onclick=\"ocultar(this);\"/></div></td>";
...

Cuando haya carios registros en el resultset, vas a acabar con varios div con ID "operaciones", "operacion", "ocultar" y "ocult". En su lugar deberías usar clases o no usar nada directamente: cuando se lanza una función asociada a un evento en jQuery, el valor de this será el elemento que generó el evento por lo que no hace falta que lo pases como parámetro a la función.

Esas líneas además se podrían mejorar porque generan HTML con CSS y JavaScript inline lo cual no es recomendado. Idealmente, deberías tener el CSS en una clase (o algún selector válido) en tu hoja de estilos y así te ahorrarías tener CSS inline. Y el JavaScript en lugar de ir en el onclick (que tiene sus inconvenientes) debería asociarse por separado con addEventListener o jQuery, y así separar la vista y el controlador.

Con esos cambios, tu PHP quedaría algo más limpio y se solucionaría el problema de los IDs repetidos:

if($rs->num_rows>0){
    while($fila=$rs->fetch_object()){
        $html.= "<tr>";
        $html.= "<td><input type=\"text\" name=\"orden\" value=\"$fila->docu_orden\" size=\"1\"></td>";
        $html.= "<td>$fila->docu_titulo</td>";
        $html.= "<td><div class=\"operaciones\"><input type=\"button\" name=\"opera\" class=\"operacion\" value=\"".$fila->docu_id."\" /></div>";
        $html.= "<div class=\"ocultar\"><input type=\"button\" name=\"$fila->docu_id\" value=\"".$fila->docu_id."-Ocultar\" /></div></td>";
        $html.= "</tr>";

Y aquí puedes ver cómo sería el resultado generado (he cambiado el objetivo de los display para que sean los div, parece que estaba mezclado y en un caso se escondía el div y en otro el button):

$(".operacion").on("click", function() {
  // this en este contexto es el botón pulsado
  var oc = $(this).closest("td").find(".ocultar");
  $(oc).css("display", "block");
  $(this).closest(".operaciones").css("display", "none");
});

$(".ocult").on("click", function() {
  var op = $(this).closest("td").find(".operaciones");
  $(op).css("display", "block");
  $(this).closest(".ocultar").css("display", "none");
});
.operacion,
.ocult {
  border: none;
  background-color: transparent;
}

.ocultar {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td><input type="text" name="orden" value="orden1" size="1"></td>
    <td>Titulo1</td>
    <td>
      <div class="operaciones">
        <input type="button" name="opera" class="operacion" value="1" />
      </div>
      <div class="ocultar">
        <input type="button" name="doc1" class="ocult" value="doc1-Ocultar" />
      </div>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orden" value="orden2" size="1"></td>
    <td>Titulo2</td>
    <td>
      <div class="operaciones">
        <input type="button" name="opera" class="operacion" value="2" />
      </div>
      <div class="ocultar">
        <input type="button" name="doc2" class="ocult" value="doc2-Ocultar" />
      </div>
    </td>
  </tr>
</table>

2
  • muchas gracias!!!
    – Sara
    el 16 ene. 2018 a las 14:16
  • La más claro que he encontrado en internet. Gracias! Ahora bien, en lugar de $(oc).css("display", "block"); yo prefiero poner la clase .ocultar: $(oc).addClass('ocultar');
    – Tony_Bielo
    el 28 nov. 2018 a las 11:04

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.