Actualizar datos en una tabla con javascript

[grossbergsteven]

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:

function 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);
 

[SeaPirates]

Podrías comprobar si existe la tabla y eliminarla para luego volverla a crear con los nuevos datos.

[jluishuaman]

lo que tu quieres es volver a cargar pero solo la fila que actualizaste?

[grossbergsteven]

Iniciado por SeaPirates

Podrías comprobar si existe la tabla y eliminarla para luego volverla a crear con los nuevos datos.

Esa es una buenaa opción, el problema es que no se como eliminar la tabla

[grossbergsteven]

Iniciado por jluishuaman

lo que tu quieres es volver a cargar pero solo la fila que actualizaste?

Gracias por sus respuestas, si puede ser o solamente el dato del <td>