Vanilla JS 从单元格中获取最低值并更改背景颜色

Question

我正在尝试更改具有最低值的单元格的背景颜色。 Co2、Co2%和人均Co2的最低值。我尝试使用下面的代码，但它给了我错误的结果。需要一些帮助来遍历 table.

我的table:

<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>

我的代码：异步函数比较数据（）{

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';
  });

}

Answer 1

您的代码正在寻找每个行的最小值，而您想要每个列。所以改用这个：

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>

注意：您发布的两张图片不是同一数据。我在此片段中使用了第二张图片中的数据。

Answer 2

此解决方案生成示例数据，在处理列而不是行方面似乎与 trincot 相似。

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>

Vanilla JS 从单元格中获取最低值并更改背景颜色

Vanilla JS get lowest value from cell and change the background color

javascript

html-table

node.js