Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

137
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda