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>
var val=this.id;
te dará elid
del elemento que fue clickeado. Aunque no lo dices de forma explícita, se puede deducir que es eso lo que quieres.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.