Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
Cómo animar filas de tablas ordenadas

Tengo una tabla con <tbody id="tbody"></tbody>

Cada 10 segundos, envío una solicitud xhr a un microcontrolador que devuelve una respuesta en formato json con redes wifi escaneadas ordenadas por intensidad de señal:

 [...] function scanWLAN() { let scanRequest = new XMLHttpRequest(); scanRequest.open("GET", scanUrl); scanRequest.responseType = "json"; scanRequest.send(); scanRequest.onload = function() { loading_el.remove(); var list = sortByKey(scanRequest.response, "RSSI"); if (list.length) { addRow(list); } } } function addRow(list) { tbody_el.innerHTML = ""; for (var i = 0; i < list.length; i++) { let newRow = document.createElement('tr'); let newColSSID = document.createElement('td'); let newColRSSI = document.createElement('td'); /*let newColEncryptionType = document.createElement('td'); let newColBSSID = document.createElement('td'); let newColChannel = document.createElement('td'); let newColIsHidden = document.createElement('td');*/ let SSID = list[i].SSID; let RSSI = list[i].RSSI; let encryptionType = list[i].encryptionType; let BSSID = list[i].BSSID; let channel = list[i].channel; let isHidden = list[i].isHidden; if (SSID == WLAN_SSID) { newRow.classList.add("table-success"); } newColSSID.innerHTML = '<span class="cursor-pointer" onclick="autocompleteSSID(\'' + SSID + '\')">' + SSID + '</span>'; //newColRSSI.textContent = RSSI; newColRSSI.innerHTML = '<span title="' + RSSI + ' dBm">' + icons["reception-" + getSignalLevel(RSSI)] + '</span'; /*newColEncryptionType.textContent = encryptionType; newColBSSID.textContent = BSSID; newColChannel.textContent = channel; newColIsHidden.textContent = isHidden;*/ newRow.appendChild(newColSSID); newRow.appendChild(newColRSSI); /*newRow.appendChild(newColEncryptionType); newRow.appendChild(newColBSSID); newRow.appendChild(newColChannel); newRow.appendChild(newColIsHidden);*/ tbody_el.appendChild(newRow); } } [...] scanWLAN(); setInterval(function () { scanWLAN(); }, 11000); [...]

Esto actualiza las filas de la tabla bastante abruptamente. Me gustaría que se vea mejor con transiciones/animaciones cuando una red recién descubierta se inserta entre las filas existentes, o cuando una red envía una mejor señal y se mueve hacia arriba en la lista.

¿Cómo puedo lograr esto con javascript puro o css?

Tenga en cuenta que no puedo incrustar bibliotecas/complementos pesados como jQuery, ya que todos los archivos/códigos deben estar alojados en un chip con muy poca memoria.

¿Cuáles serían las palabras clave apropiadas para encontrar documentos sobre lo que estoy tratando de lograr?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda