Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!