Estoy tratando de cambiar el color de fondo de las celdas con el valor más bajo. El valor más bajo de Co2, Co2% y Co2 per cápita. Intenté con el siguiente código pero me dio un resultado incorrecto. Necesita ayuda para iterar a través de la tabla.
Mi mesa:
<table> <thead> <tr> <th>Country</th> <th>Year</th> <th>CO2</th> <th>CO2 %</th> <th>CO2 per capita</th> <th>Population</th> </tr> </thead> <tbody id="tablebody"></tbody> </table>Mi código: función asíncrona compareData() {
document.querySelectorAll('tbody>tr').forEach((row) => { const co2 = row.querySelector('td:nth-child(3)'); const co2Percent = row.querySelector('td:nth-child(4)'); const co2PerCapita = row.querySelector('td:nth-child(5)'); const columns = [co2, co2Percent, co2PerCapita]; const minValue = Math.min(...columns.map(element => element.textContent)); columns.find(element => element.textContent == minValue).style.backgroundColor = 'lime'; });}
Esta solución genera datos de muestra y parece similar a trincot en la forma en que funciona en columnas en lugar de filas.
function fillInData(sel, rows) { const t = document.querySelector(sel); const cols = t.querySelectorAll("th").length; const body = t.querySelector("tbody"); for (let r=0; r<rows; r++) { let row = ['<tr>']; for (let c=0; c<cols; c++) { row.push(`<td>${~~(Math.random()*100)}</td>`); } body.insertAdjacentHTML("beforeend", row.join("")); } } function highlightLowestInColumn(sel, color) { const t = document.querySelector(sel); const cols = t.querySelectorAll("th").length; const body = t.querySelector("tbody"); for (let c=0; c<cols; c++) { const cells=[... body .querySelectorAll(`td:nth-child(${c+1}`)]; const min=Math.min(... cells.map(v=>v.textContent)); cells.find(e=>e.textContent == min) .style.backgroundColor=color; } } fillInData("#t", 5); highlightLowestInColumn("#t",'lime'); <table id="t"> <thead> <tr> <th>Country</th> <th>Year</th> <th>CO2</th> <th>CO2 %</th> <th>CO2 per capita</th> <th>Population</th> </tr> </thead> <tbody></tbody> </table>Su código está encontrando el mínimo por fila , mientras que lo quiere por columna . Así que usa esto en su lugar:
function compareData() { const rows = document.querySelector("tbody").rows; for (let col = 2; col < 5; col++) { const cells = Array.from(rows, row => row.cells[col]); const data = cells.map(cell => +cell.textContent); const min = Math.min(...data); const i = data.indexOf(min); cells[i].style.backgroundColor = "lime"; } } compareData(); <table> <thead> <tr> <th>Country</th> <th>Year</th> <th>CO2</th> <th>CO2 %</th> <th>CO2 per capita</th> <th>Population</th> </tr> </thead> <tbody id="tablebody"> <tr><td>Sweden</td><td>1904</td><td>10.325</td><td>5.306</td><td>1.964</td><td>5257162</td></tr> <tr><td>Norway</td><td>1904</td><td>4.159</td><td>-1.901</td><td>1.813</td><td>2293727</td></tr> <tr><td>Denmark</td><td>1904</td><td>6.178</td><td>7.869</td><td>2.303</td><td>2682732</td></tr> </tbody> </table>NB: las dos imágenes que publicaste no tienen los mismos datos. Usé los datos de la segunda imagen en este fragmento.