Buenos días, tengo una tabla hecha con javascript, que lee los datos desde una base de datos local, lo que busco es que cuando cambie un dato en dicha base de datos, se me actualice la impresión en la tabla, yo logre realizar dentro de una función que lee cada 5 segundos la base de datos, pero lo que pasa es que me crea toda una tabla nueva en cada sonsulta, si alguien me puede ayudar se los agradeceria, coloco mi código
Código Javascript
:
Ver originalfunction cargar(){
var db = openDatabase("incasports", "1.0", "", 1024);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM juego INNER JOIN logro on (juego.id_equipo = logro.id_equipo) WHERE liga="NBA" order by juego.ref, juego.fecha', [], function (tx, results) {
var len = results.rows.length, i;
var ref = results.rows.item(0).ref;
var ML = results.rows.item(0).logros;
var n = results.rows.item(0).nombre;
var referencia = results.rows.item(0).ref;
var RL = results.rows.item(0).logros;
var AB = results.rows.item(0).logros;
var MLP = results.rows.item(0).logros;
var ABP = results.rows.item(0).logros;
var RLP = results.rows.item(0).logros;
var fecha = results.rows.item(0).fecha;
var hora = results.rows.item(0).hora;
var horac = results.rows.item(0).horac;
document.getElementById('status').innerHTML+="<th colspan=3>"+ "NBA" + " " + fecha + "</th>" + "<th colspan=3>" + "Juego completo" + "</th>" + "<th colspan=3>" + "Primera mitad" + "</th>" ;
document.getElementById('status').innerHTML+= "<td align=center>" + "Hora" + "</td>" + "<td align=center>" + "Ref" + "</td>" + "<td align=center>" + "Equipo" + "</td>" + "<td align=center>" + "ML" + "</td>"+ "<td align=center>" + "A/B" + "</td>" + "<td align=center>" + "RL" + "</td>" + "<td align=center>" + "ML" + "</td>" + "<td align=center>" + "A/B" + "</td>" + "<td align=center>" + "RL" + "</td>";
var fonml = "white";
var fonab = "white";
var fonrl = "white";
var fonmlp = "white";
function colorfondo(horac){
var date = (new Date().toString("HH:mm:ss"));
var horas = date.substr(0,2);
var minutos = date.substr(3,2);
var m = date.substr(9,2);
var horasc = horac.substr(11,2);
var minutosc = horac.substr(14,2);
if (horas == horasc) {
var minutost = minutos-minutosc;
if (minutost <= 2) {
return "red";
} else if (minutost <= 5 ) {
return "yelow";
} else if (minutost <= 10) {
return "green";
} else {
return "white";
};
} else {
return "white";
};
};
for (i = 0; i < len; i++){
if (ref != results.rows.item(i).ref) {
fonml=colorfondo(results.rows.item(i).horac);
document.getElementById('status').innerHTML+= "<td align=center>" + hora + "</td>" + "<td>" + referencia + "</td>" + "<td>" + n + "</td>" + "<td align=right>" + ML + "</td>"+ "<td align=right>" + AB + "</td>" + "<td align=right>" + RL + "</td>" + "<td align=right>" + MLP + "</td>" + "<td align=right>" + ABP + "</td>" + "<td align=right>" + RLP + "</td>";
ref = results.rows.item(i).ref;
n = results.rows.item(i).nombre;
referencia = results.rows.item(i).ref;
ML = results.rows.item(i).logros;
RL = results.rows.item(i).logros;
AB = results.rows.item(i).logros;
RLP = results.rows.item(i).logros;
hora = hora = results.rows.item(i).hora;
};
if (results.rows.item(i).clase == "ML") {
fonml=colorfondo(results.rows.item(i).horac);
ML = results.rows.item(i).logros;
};
if (results.rows.item(i).clase == "RL") {
fonrl=colorfondo(results.rows.item(i).horac);
RL = results.rows.item(i).logros;
};
if (results.rows.item(i).clase == "AB") {
fonab=colorfondo(results.rows.item(i).horac);
AB = results.rows.item(i).logros;
};
if (results.rows.item(i).clase == "MLP") {
MLP = results.rows.item(i).logros;
};
if (results.rows.item(i).clase == "ABP") {
ABP = results.rows.item(i).logros;
};
if (results.rows.item(i).clase == "RLP") {
RLP = results.rows.item(i).logros;
};
}
document.getElementById('status').innerHTML+= "<td align=center>" + hora + "</td>" + "<td>" + ref + "</td>" + "<td>" + n + "</td>" + "<td align=right>" + ML + "</td>" + "<td align=right>" + AB + "</td>" + "<td align=right>" + RL + "</td>" + "<td align=right>" + MLP + "</td>" + "<td align=right>" + ABP + "</td>" + "<td align=right>" + RLP + "</td>";
}, null);
});
};
setInterval("cargar()",5000);