I'm having a problem highlighting cells in a table

Hello, I have created a forms that gathers infos sent to it and hence creates a table with them. Both tasks get done by JavaScript.
I want to highlight the highest price and lowest price in this table using JavaScript but I couldn’t attain a good result.

HTML:

        <section id="search-banner" class="sectionmanager">
            <img src="images.sample/vinyl.png" class="bg-1" alt="bg-1">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div id="div_entrada">
                <label for="produto_compras" id="search-banner-text"></label>Digite aqui o produto:</label><br>
                <div  class="typingbox-manager">
                <i class="fas fa-search"></i>     <input id="produto_compras" type="text"  class="empty" placeholder="Produto"><br><br>
                </div>
                <label for="preco_uni_compras">Digite aqui o valor unitário (R$):</label><br>
                <div  class="typingbox-manager">
                <i class="fas fa-dollar-sign"></i>     <input id="preco_uni_compras" class="empty" type="text" placeholder="Ex: 1,00"><br><br>
                </div>
                <label for="quant_compras">Digite aqui a quantidade:</label><br>
                <div  class="typingbox-manager">
                <i class="fas fa-sort-amount-up"></i>     <input id="quant_compras" type="text" class="empty" placeholder="Quantidade"><br><br>
                </div>
                <input id="botao_inserir" type="button" class="buttonskin" value="Inserir compra" onclick="inserir_compras()">
            </div>
            <br>
        </section>
        <section class="contain">
            <div id="div_compras">
                <table id="table_compras">
                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Valor Unitário</th>
                            <th>Quantidade</th>
                            <th>Total</th>
                        </tr>
                    </thead>
        
                    <tbody>
        
                    </tbody>
        
                    <tfoot>
                        <td colspan="3">Total</td>
                        <td id="td_total"></td>
                    </tfoot>
                </table>
            </div>
        </section>

JavaScript

var compras = []

function inserir_compras() {
    var table = document.getElementById("table_compras")
    var tbody = document.createElement("tbody")
    var produto_compra = document.getElementById("produto_compras").value
    var preco_uni_compra = parseFloat(document.getElementById("preco_uni_compras").value.replace(",","."))
    var quant_compra = parseFloat(document.getElementById("quant_compras").value.replace(",","."))
    var total = parseFloat(preco_uni_compra * quant_compra)
    var quant_linhas = table.rows.length
    
    var linha = table.insertRow(quant_linhas)


    var col_produto = linha.insertCell(0);
    var col_valoruni = linha.insertCell(1);
    var col_quant = linha.insertCell(2);
    var col_total = linha.insertCell(3);

    col_produto.innerHTML = produto_compra;
    col_valoruni.innerHTML = "R$"+ preco_uni_compra.toFixed(2);
    col_quant.innerHTML = quant_compra;
    col_total.innerHTML = "R$" + total.toFixed(2)

    compras.push(total)
    tbody.appendChild(linha)
    table.appendChild(tbody)
        
    var soma = 0
    for(var i in compras) {
        soma += compras[i]
    }

   var td_total = document.getElementById("td_total")
   td_total.innerHTML = ("R$" + soma.toFixed(2))



var table = document.getElementById("table");

            getMin();
            getMax();

// get min value
function getMin() {
    var minVal, minIndex;
    for(var i = 1; i < table.rows.length; i++){
        if(i === 1){
            minVal = table.rows[i].cells[2].innerHTML;
            minIndex = table.rows[i].rowIndex;
        }else if(minVal > table.rows[i].cells[2].innerHTML){
            minVal = table.rows[i].cells[2].innerHTML;
            minIndex = table.rows[i].rowIndex;
                  }
              }
              table.rows[minIndex].cells[2].style.background = "red";
              table.rows[minIndex].cells[2].style.color = "white";
              document.getElementById("minV").innerHTML = "Minimum Value = "+minVal;
              document.getElementById("minV").style.color = "red";
               console.log("Min => "+minVal);       
            }
            

            // get max value
            function getMax()
            {
              var maxVal, maxIndex;
              for(var i = 1; i < table.rows.length; i++){
                  if(i === 1){
                      maxVal = table.rows[i].cells[2].innerHTML;
                      maxIndex = table.rows[i].rowIndex;
                  }else if(maxVal < table.rows[i].cells[2].innerHTML){
                      maxVal = table.rows[i].cells[2].innerHTML;
                       maxIndex = table.rows[i].rowIndex;
                  }
              }
              table.rows[maxIndex].cells[2].style.background = "green";
              table.rows[maxIndex].cells[2].style.color = "white";
              document.getElementById("maxV").innerHTML = "Maximum Value = "+maxVal;
              document.getElementById("maxV").style.color = "green";
               console.log("Max => "+maxVal);       
            }
}

SideNote: The entire content of the website is not in English, I hope it doesn’t make solving this problem harder. Thanks in advance.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.