Home / Questions / 279042
Accepted
Andres
Asked: 2020-07-16 05:25:44 +0800 CST 2020-07-16 05:25:44 +0800 CST

Border doesn't work as expected when table is modified with javascript

  • 772

I am making a small page that, depending on the data it receives (via websockets), shows one tablaor the other. My idea is that when the data arrives for one or the other tabla, the other is hidden with the método display noneand the other is shown with the método display blockand since only the body is modified, I predefine the rest of the table elements, including the border.

When the page is hardly loaded, both appear tablas(since no data has been received yet) and as soon as a new "message" arrives, one is forced to tablabe displayed and the other not, but this time with the data. When it is drawn for the first time, the bordedrawing of the tablaoccupies the smallest possible dimension, but when a piece of data arrives, the one bordeof the tablaoccupies the entire screen and those bordesof the tdare adjusted to the data they contain. That could be happening?

Edit 1: I leave a screenshot of what happens: http://prntscr.com/ofajfg

I leave the code even though the error cannot be seen (the data needs to be received by websocket).

var connection = new WebSocket('ws://localhost:algún_puerto/ws/pruebaWebsocket', ['soap', 'xmpp']);
var datos = {};
// When the connection is open, send some data to the server
connection.onopen = function () {
  connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
  var temp = JSON.parse(e.data);
  if(temp.topic === "reloj")
  {
    document.getElementById("asd").innerHTML = Date(datos.payload).toString();
  }
  else if(temp.topic === "piezasTotales")
  {
    console.log(temp);
  }
  else if(temp.topic === "ops1")
  {
    document.getElementById("selectorOp").style.display = "block";
    document.getElementById("informe").style.display = "none";
    datos = temp;
    llenarTabla1();
  }
  else
  {
    document.getElementById("selectorOp").style.display = "none";
    document.getElementById("informe").style.display = "block";
    datos = temp;
    llenarTabla();
  }
};

function enviar()
{
  connection.send("prueba");
}

function llenarTabla()
{
  console.log(datos);
  var abiertas = 0;
  var completadas = 0;
  var tbodie = document.getElementById("tbodie");
  for(var i = 0; i < datos.payload.length; i++) {
    var trCuerpo = document.createElement("tr");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
    var td5 = document.createElement("td");
    var td6 = document.createElement("td");
    var td7 = document.createElement("td");
    var td8 = document.createElement("td");
    var td9 = document.createElement("td");
    var td10 = document.createElement("td");
    var td11 = document.createElement("td");
    var td12 = document.createElement("td");
    var td13 = document.createElement("td");
    var td14 = document.createElement("td");
    var td15 = document.createElement("td");
    var td16 = document.createElement("td");
    var td17 = document.createElement("td");
    var td18 = document.createElement("td");
    var td19 = document.createElement("td");
    var td20 = document.createElement("td");
    var td21 = document.createElement("td");
    var td22 = document.createElement("td");

    td1.appendChild(document.createTextNode(datos.payload[i].op));
    td2.appendChild(document.createTextNode(datos.payload[i].total));
    td3.appendChild(document.createTextNode(datos.payload[i].reprocesos.mel));
    td4.appendChild(document.createTextNode(datos.payload[i].reprocesos.pvc));
    td5.appendChild(document.createTextNode(datos.payload[i].reprocesos.vid));
    td6.appendChild(document.createTextNode(datos.payload[i].reprocesos.otr));
    td7.appendChild(document.createTextNode(datos.payload[i].frentes.mel));
    td8.appendChild(document.createTextNode(datos.payload[i].frentes.pvc));
    td9.appendChild(document.createTextNode(datos.payload[i].frentes.vid));
    td10.appendChild(document.createTextNode(datos.payload[i].frentes.otr));
    td11.appendChild(document.createTextNode(datos.payload[i].frenRep.mel));
    td12.appendChild(document.createTextNode(datos.payload[i].frenRep.pvc));
    td13.appendChild(document.createTextNode(datos.payload[i].frenRep.vid));
    td14.appendChild(document.createTextNode(datos.payload[i].frenRep.otr));
    td15.appendChild(document.createTextNode(datos.payload[i].piezas.mel));
    td16.appendChild(document.createTextNode(datos.payload[i].piezas.pvc));
    td17.appendChild(document.createTextNode(datos.payload[i].piezas.vid));
    td18.appendChild(document.createTextNode(datos.payload[i].piezas.otr));
    td19.appendChild(document.createTextNode(datos.payload[i].pieRep.mel));
    td20.appendChild(document.createTextNode(datos.payload[i].pieRep.pvc));
    td21.appendChild(document.createTextNode(datos.payload[i].pieRep.vid));
    td22.appendChild(document.createTextNode(datos.payload[i].pieRep.otr));

    trCuerpo.appendChild(td1);
    trCuerpo.appendChild(td2);
    trCuerpo.appendChild(td3);
    trCuerpo.appendChild(td4);
    trCuerpo.appendChild(td5);
    trCuerpo.appendChild(td6);
    trCuerpo.appendChild(td7);
    trCuerpo.appendChild(td8);
    trCuerpo.appendChild(td9);
    trCuerpo.appendChild(td10);
    trCuerpo.appendChild(td11);
    trCuerpo.appendChild(td12);
    trCuerpo.appendChild(td13);
    trCuerpo.appendChild(td14);
    trCuerpo.appendChild(td15);
    trCuerpo.appendChild(td16);
    trCuerpo.appendChild(td17);
    trCuerpo.appendChild(td18);
    trCuerpo.appendChild(td19);
    trCuerpo.appendChild(td20);
    trCuerpo.appendChild(td21);
    trCuerpo.appendChild(td22);

    tbodie.appendChild(trCuerpo);

    (datos.payload[i].COMPLETADO===1)?completadas++:abiertas++;
  }
}

function llenarTabla1()
{
  console.log(datos);
  var abiertas = 0;
  var completadas = 0;
  var tbodie = document.getElementById("selectorOpCuerpo");

  for(var i = 0; i < datos.payload.length; i++)
  {
    var trCuerpo = document.createElement("tr");

    var td1 = document.createElement("th");
    var td2 = document.createElement("th");
    var td3 = document.createElement("th");
    var td4 = document.createElement("th");
    td1.appendChild(document.createTextNode(datos.payload[i].ID));
    td2.appendChild(document.createTextNode(datos.payload[i].fecha));
    td3.appendChild(document.createTextNode(datos.payload[i].OP))
    td4.appendChild(document.createTextNode(datos.payload[i].COMPLETADO))

    td1.style.color = (datos.payload[i].COMPLETADO===1)?"green":"red";
    td2.style.color = (datos.payload[i].COMPLETADO===1)?"green":"red";
    td3.style.color = (datos.payload[i].COMPLETADO===1)?"green":"red";
    td4.style.color = (datos.payload[i].COMPLETADO===1)?"green":"red";

    td4.setAttribute('onclick', 'posicion(' + i + ')');

    trCuerpo.appendChild(td1);
    trCuerpo.appendChild(td2);
    trCuerpo.appendChild(td3);
    trCuerpo.appendChild(td4);

    tbodie.appendChild(trCuerpo);

    (datos.payload[i].COMPLETADO===1)?completadas++:abiertas++;
  }

  document.getElementById("cantidad").innerHTML = "<font color=\"green\">completadas: " + completadas + "</font><br><font color=\"red\">abiertas: " + abiertas + "</font>"
}

function posicion(i)
{
  console.log(datos);
  datos.payload[i].COMPLETADO = (datos.payload[i].COMPLETADO===0)?1:0;
  llenarTabla1();
}
<div id="asd"></div>
<button onClick="enviar()">enviar</button>
<br>
<div id="cantidad"></div>

<table id="selectorOp" border="1px">
  <thead>
  <tr>
    <th>id</th>
    <th>fecha</th>
    <th>op</th>
    <th>seleccionar</th>
  </tr>
  </thead>
  <tbody id="selectorOpCuerpo"> </tbody>
</table>

<table id="informe" border="1px">
  <thead>
    <tr>
      <th rowspan="2">Op</th>
      <th rowspan="2">Total</th>
      <th colspan="4">Total reprocesos</th>
      <th colspan="4">Frentes</th>
      <th colspan="4">Frentes reprocesados</th>
      <th colspan="4">Piezas</th>
      <th colspan="4">Piezas reprocesadas</th>
    </tr>
    <tr>
      <th>MEL</th>
      <th>MDF</th>
      <th>VID</th>
      <th>otr</th>
      <th>MEL</th>
      <th>MDF</th>
      <th>VID</th>
      <th>otr</th>
      <th>MEL</th>
      <th>MDF</th>
      <th>VID</th>
      <th>otr</th>
      <th>MEL</th>
      <th>MDF</th>
      <th>VID</th>
      <th>otr</th>
      <th>MEL</th>
      <th>MDF</th>
      <th>VID</th>
      <th>otr</th>
    </tr>
  </thead>
  <tbody id="tbodie"> </tbody>
</table>

javascript

1 Answers

  1. Best Answer

    By default, all tags have certain properties that browsers provide to them. In the case of the tables they are the following:

    table

    display: table;

    border-collapse: separate;

    border-spacing: 2px;

    border-color: gray;

    When you try to show the table that is hidden, what you are doing is changing the displayto one that will cause its behavior to not be as expected.

    Instead of using display: blockto display the table try using display: table, that should fix your problem.

    Reference: Default CSS Styles

    • 3