I have a table with <tbody id="tbody"></tbody>
Every 10sec, I send an xhr request to a microcontroller that returns a json formatted response with scanned wifi networks sorted by signal strength :
[...]
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);
[...]
This refreshes the table rows quite abruptly. I would like to make it look cooler with transitions/ animations when a newly discovered network gets inserted in between existing rows, or when a network sends better signal and is moved up the list.
How can I achieve this with pure javascript or css?
Please note than I can not embed heavy libraries/plugins such a jQuery as all files/codes must be hosted on a chip with very low memory.
What would be the appropriate keywords to find docs about what I am trying to achieve?