I have a function that when I hit an html button calls a function javascript
to print the results in a table already created but empty, which in this case is called "selected table". How could I make it disappear when I play again? I understand about the onclick event and the remove child but I go crazy with javascript because the frontend is not my strong point.
I forgot to mention that I already finished the whole project without jquery, if it is possible I will continue like this, but I will see how I implement it.
function verEventos(){
var usuario= document.getElementById("usuario");
var pass= document.getElementById("pass");
var xmlhttp = new XMLHttpRequest();
var url= "/Proyecto_Final_AAB/rest/adminSeg/verEventos";
if(usuario=="" && pass==""){
alert("Los campos 'usuario' y 'pass' no pueden quedar en blanco.")
}
else
{
xmlhttp.onreadystatechange= function(){
if(this.readyState==4 && this.status==200){
//Creación de títulos
//Elegimos el elemento donde Totos los 'td' van a ser adheridos
var tablaElegida= document.getElementById("tablaElegida");
var cabecera = ["-ID-", "nombre", "Fecha"];
for( var i=0; i < cabecera.length; i++)
{
var tablaElegida= document.getElementById("tablaElegida");
var crearTitulos=document.createElement("td");
var textoNombre= document.createTextNode(cabecera[i]);
crearTitulos.appendChild(textoNombre);
tablaElegida.appendChild(crearTitulos).style.border = "solid yellow";
}
//Esta es la respuesta del servidor, sobre esta recaen todas las acciones.
var datos= xmlhttp.responseText;
//Parseamos los datos
var parseDatos= JSON.parse(datos);
//Iteramos sobre la respuesta del JSON
for(var i=0; i < xmlhttp.responseText.length; i++){
//Creamos un renglon por cada elemento que iteramos
var hilera= document.createElement("tr");
var tablaElegida= document.getElementById("tablaElegida");
tablaElegida.appendChild(hilera);
//id_evento
//Creamos los td que contendrán los resultados
var newtdId_evento= document.createElement("td");
//Adherimos los td a la tabla ya existente
tablaElegida.appendChild(newtdId_evento).style.border = "thin solid white";
//Creamos el texto y aherimos las columnas parseadas
var textoId_evento= document.createTextNode(parseDatos[i].id_evento);
//Adherimos el texto ya creado a los td
newtdId_evento.appendChild(textoId_evento);
//Nombre
//Creamos los td que contendrán los resultados
var newtdNombre= document.createElement("td");
//Adherimos los td a la tabla ya existente
tablaElegida.appendChild(newtdNombre).style.border = "thin solid white";
//Creamos el texto y aherimos las columnas parseadas
var textoNombre= document.createTextNode(parseDatos[i].nombre);
//Adherimos el texto ya creado a los td
newtdNombre.appendChild(textoNombre);
//Fecha
//Creamos los td que contendrán los resultados
var newtdFecha= document.createElement("td");
//Adherimos los td a la tabla ya existente
tablaElegida.appendChild(newtdFecha).style.border = "thin solid white";
//Creamos el texto y aherimos las columnas parseadas
var textoFecha= document.createTextNode(parseDatos[i].fecha);
//Adherimos el texto ya creado a los td
newtdFecha.appendChild(textoFecha);
}
}
}
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("usuario="+usuario.value+"&pass="+pass.value);
}
And this is the html, a part only because it's long:
<div id="resultados">
<ul id="ulElegido">
<table id="tablaElegida"></table>
</ul>
</div>
here the button:
<table id="verTodosEventos">
<tr>
<td>
<input type="button" value="Ver eventos" onclick="verEventos()">
</td>
</tr>
</table>
I had thought about changing the appendChild to the ul that is created and then removeChild, but I'm good to hear if there are more efficient solutions.