Tengo un php que muestra una tabla vía ajax, y cada vez que se inserta un registro o se modifica la muestra.
Hasta ahí funciona ok. el tema es que quiero añadir un botón para ocultar o mostrar la tabla, lo he puesto pero no funciona la función. si llamo a la pagina sola si lo hace.
Me pueden ayudar a encontrar el error o el defecto de programación?. Realmente no se mucho de ajax, me estoy metiendo de apoco para ir aprendiendo
Ejemplo:
consulta.php
<html lang="es">
<head>
<link href="css/estilos.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script type="text/javascript">
function tiempoReal()
{
var tabla = $.ajax({
url:'tabla2.php',
type: 'GET',
dataType:'html',
async:false,
}).responseText;
document.getElementById("miTabla").innerHTML = tabla;
}
setInterval(tiempoReal, 1000);
</script>
</head>
<body>
<header>
<div class="alert alert-info">
<h2>Consulta tiempo real</h2>
</div>
</header>
<section id="miTabla">
</section>
</body>
</html>
tabla2.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("tr").hide();
});
$("#show").click(function(){
$("tr").show();
});
});
</script>
</head>
<body>
<?php
echo '<table id="ttt" class="table" style="background-color: blue; font-size:12px; margin-top:-1%;">';
echo '<tr class="active">
<th>Id Cliente</th>
<th>Nombre</th>
<th>Apellido</th>
</tr>';
{
echo'<tr>
<td>001</td>
<td>Ezequiel</td>
<td>Suarez</td>
</tr>';
}
?>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>