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

Posted 2023-03-05

【中文标题】Vanilla JS 从单元格中获取最低值并更改背景颜色

【英文标题】：Vanilla JS get lowest value from cell and change the background color

【发布时间】：2022-01-15 18:07:21

【问题描述】：

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

我的桌子：

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

我的代码： 异步函数 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';
  );

【参考方案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>

注意：您发布的两张图片的数据不同。我在这个 sn-p 中使用了第二张图片中的数据。

【参考方案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>