Take column data from a given row with Jquery

Question

I have a table where I pull the data of all the products I have registered in the database, more or less like this:

codigo | descricao | valor | ...
----------------------------
123456 | produto 1 | 15,00 | ...
789123 | produto 2 | 65,90 | ...

This table is hidden on the page and serves to pull the data into the shopping cart (yes, it is a sales screen). Then the fun begins:

1. I need to know how to do, so when the person enters the code in the search field, a search will be done for that code in the table.
2. How to return values of <td> related that code.
3. How to view this data on the screen when the person clicks on "Add to cart".

This is for a course completion work, and it’s the only part I’m having the most difficulties, if you can help me I’ll be very grateful. Vlww

Follow the code (I won’t put the link page if it wouldn’t be too big, but give an example):

$(function(){
             $(".dado-valor-total").mask('#.##0,00', { reverse: true });
         });
         
window.onload = calculaValor;
        
        var tabela = document.getElementById('tabelaOs');
        var linhas = tabela.getElementsByTagName('tr');
        
        function calculaValor(){
            
            var totalVenda = 0;

            for(var i = 1 ; i <= linhas.length ; i++ ) {
                var qtd = document.querySelector("#qtdeItem"+[i]).value;
                var valorUnit = document.querySelector(".valor-unit"+[i]).textContent.replace(",",".");
                var valorTotal = document.querySelector(".valor-total"+[i]).textContent = parseFloat(valorUnit * qtd).toFixed(2).replace(".",",");
                totalVenda = parseFloat(totalVenda) + parseFloat(valorTotal.replace(",","."));
                document.querySelector(".dado-valor-total").textContent = totalVenda.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"});
            }
        }
        
        for(var i = 1 ; i <= linhas.length ; i++ ) {
            var campoQtd = document.querySelector("#qtdeItem"+[i]);
            
            campoQtd.addEventListener('input',function(){
               calculaValor(); 
            });
        }

$(function(){
    fixarDescricao();
});


// vizualização da foto do produto
    function readURL(input, id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#'+id)
                .attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }  


// fixa descricao automaticamente
$(document).ready(function() {
  $(".campo-formulario").on("keydown change", function() {
    var elem = $(this);
    var siblings = elem.siblings();
    if (elem.val().length > 0) {
      siblings.addClass('descricao-fixa');
        $('.icon-form').removeClass('descricao-fixa');
    } else {
      siblings.removeClass('descricao-fixa');
        $('.icon-form').removeClass('descricao-fixa');
    }
  });
});


// fixar descrição do campo
function fixarDescricao() {
    var campo = $('.campo-formulario');
    var descricao = $('.descricao-campo');
    campo.on('input',function(){
        var descricaoAtual = $(this).parent().find('.descricao-campo');
       if($(this).val().length > 0){
           descricaoAtual.addClass('descricao-fixa');
       } else{
           descricaoAtual.removeClass('descricao-fixa');
       }
    }); 
    // remove a descrição fixa quando o botao reset é clicado
    var reset = $('input:reset');
    reset.on('click', function(){
        descricao.removeClass('descricao-fixa');
    });
}

.abrir {
    position: fixed;
    top: 25px;
    left: 25px;
    color: #333;
    font-size: 30px;
    z-index: 10001;
    cursor: pointer;
    transition: all .5s;
    display: flex;
}

body {
    background: #f5f5f5;
}

.titulo {
    margin-left: 50px;
}

.campo-tabela {
    width: 40px;
    border: none;
    height: auto;
    padding: 0;
    margin-left: 20px;
    margin-bottom: 0;
    text-align: center;
}

.campo-tabela:focus {
    border: none;
}

.fa-laptop {
    margin-right: 15px;
    display: none;
}

.barra-lateral {
    transition: all .5s;
    width: 0;
    height: 100vh;
    position: fixed;
    padding-top: 80px;
    background: #333;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(30,30,30,.5);
    overflow-x: hidden;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.conteudo {
    margin-left: 0;
    background: #f5f5f5;
    margin-bottom: 100px;
}

.linha-adicionar-produto {
    display: flex;
    align-items: center;
    width: 100%;
    height: 120px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(50,50,50,.3);
    margin-bottom: 20px;
}

.linha-conteudo-venda {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.thead-dark th {
    background-color: #333 !important;
    border-bottom: none !important;
    color: #fff !important;
}

tr, td, th {
    color: #333;
}

.tabela-itens-venda {
    width: 69%;
    min-height: calc(100vh - 380px);
    max-height: calc(100vh - 380px);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(50,50,50,.3);
}

.informacoes-venda {
    width: 29%;
    min-height: calc(100vh - 380px);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(50,50,50,.3);
}

.linha-resumo-venda {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 30px 30px 30px;
    background: #f5f5f5;
}

.conteudo-resumo-venda {
    height: 80px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(50,50,50,.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foto-produto {
    width: 80px;
    height: 80px;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(50,50,50,.3);
    border-radius: 50%;
    margin-right: 15px;
}

.foto-produto a img {
    min-height: 100%;
}

.pesquisa-produto {
    width: calc(100% - 95px);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.produto {
    width: calc(100% - 480px);
    min-width: 280px;
}

.qtde {
    width: 200px;
}

input, select {
    outline: none;
    width: 100%;
    border: 1px solid #ccc;
    height: 45px;
    padding: 0 15px;
    font-family: 'Texto';
    color: #222;
    font-size: 105%;
    background: none;
    z-index: 3;
    background: #fff;
}

.formulario-informacoes-venda input, .formulario-informacoes-venda select {
    margin-bottom: 20px;
}

.container-campo {
    position: relative;
}

.descricao-campo {
    position: absolute;
    left: 15px;
    top: 10px;
    transition: all .2s;
    cursor: text;
    z-index: 1;
    -webkit-user-select: none;
       -moz-user-select: -moz-none;
        -ms-user-select: none;
            user-select: none;
}

.descricao-fixa {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    font-weight: bold;
}

input:focus ~ .descricao-campo , select:focus ~ .descricao-campo {
    top: -10px;
    left: 8px;
    transition: all .2s;
    z-index: 3;
    background: #fff;
    padding: 0 5px;
    font-size: 80%;
    color: dodgerblue;
    font-weight: bold;
}

input:focus , select:focus {
    border: 2px solid dodgerblue; 
}

#btn-pesquisa-produto {
    display: none;
}

.btn-cadastro {
    width: 250px;
    height: 45px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Titulos';
    color: #fff;
    transition: all .5s;
    margin-right: 20px;
    cursor: pointer;
    font-size: 110%;
    letter-spacing: .5px;
}

.btn-pesquisa-produto-label:hover {
    transform: translateY(0px);
}

.btn-pesquisa-produto-label {
    background: forestgreen;
}

.btns-acao-venda {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-finalizar-venda {
    background: forestgreen;
}

.btn-cancelar-venda {
    background: darkred;
}

.valor-total-venda {
    display: flex;
    align-items: center;
}

.titulo-valor-total {
    font-family: 'titulos';
    color: #333;
    font-size: 200%;
}

.dado-valor-total {
    font-family: 'titulos';
    color: forestgreen;
    font-size: 250%;
}

.fa-arrow-circle-right {
    margin: 0 15px;
}

.fa-edit, .fa-trash {
    color: #333;
}

.fa-edit:hover {
    color: forestgreen;
}

.fa-trash:hover {
    color: darkred;
}

.icon-form {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: dodgerblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.container-mobile {
    margin-top: 80px;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 50px);
    align-items: center;
    justify-content: center;
    padding: 30px;
    display: none;
}

.info-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.figure-info {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
    transition: all .3s;
}

.principal-info-mobile {
    font-family: 'titulos';
    font-size: 300%;
    margin-bottom: 15px;
}

.desc-info-mobile {
    font-size: 110%;
    text-align: center;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1170px) {
    .titulo-valor-total, .dado-valor-total {
        font-size: 180%;
    }
    
    .btn-cadastro {
        width: 200px;
    }
    
    .tabela-itens-venda {
        width: 100%;
    }
    
    .informacoes-venda {
        display: none;
    }
}

/* tira o sublinhado dos links */
a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    width: 100%;
    font-family: 'Texto';
    position: relative;
}

.main {
    display: flex;
}

.botoes-cadastro-funcionario {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.btn-cadastro {
    width: 250px;
    height: 45px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Titulos';
    color: #fff;
    transition: all .5s;
    margin-right: 30px;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 100%;
}

.btn-cadastro:last-child {
    margin: 0;
}

.btn-cadastro:hover {
    transition: all .5s;
    transform: translateY(2px);
}

@media screen and (max-width: 1250px) {
    .barra-lateral {
        width: 0;
    }
    
    .fa-laptop {
        display: none;
    }
    
    .abrir {
        display: flex;
    }
    
    .titulo {
        margin-left: 50px;
    }
    
    .conteudo {
        margin-left: 0;
    }
}

@media screen and (max-width: 900px) {
    .quadros-aviso {
        flex-wrap: wrap;
    }
    
    .box-aviso {
        width: 48%;
        margin-bottom: 3%;
    }
    
    .os-concluidas {
        display: flex;
    }
}

@media screen and (max-width: 830px) {
    .titulo-tabela {
        background: none;
        color: #333;
        text-shadow: none;
        font-size: 200%;
        margin-top: -20px;
        margin-bottom: 20px;
    }
    
    .titulo-tabela::before {
        content: '-';
        color: dodgerblue;
        margin-right: 10px;
    }
    
    .titulo-tabela::after {
        content: '-';
        color: dodgerblue;
        margin-left: 10px;
    }
}

@media screen and (max-width: 626px) {
    .box-aviso {
        width: 100%;
        margin-bottom: 3%;
        padding: 15px 35px;
    }
    
    .btn-venda {
        display: none;
    }
    
    .fa-bell {
        display: none;
    }
    
    .icon-mobile.fa-bell {
        display: block;
    }
    
    .head {
        justify-content: center;
    }
    
    .box-search {
        top: 80px;
        right: 0;
        width: 100%;
    }
    
    .footer {
        flex-direction: column;
        height: auto;
        text-align: center;
        padding: 20px;
    }
    
    .icons-footer {
        margin: 10px 0;
    }
    
    .copyright {
        order: 3;
        margin-top: 10px;
        font-size: 90%;
        color: #333;
    }
    
    .area-icons-mobile {
        display: flex;
    }
    
    .menu li a:first-child {
        border-top: 1px solid #444;
    }
    
    .conteudo {
        padding: 30px 15px;
    }
    
    .table {
        font-size: 90%;
    }
}

<!-- <%@page import="model.Produto"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="ISO8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Saphyra® - Registrar Venda</title>
        <!-- folhas de estilo css -->
        <link href="css/dashboard.css" rel="stylesheet">
        <link href="css/vendas.css" rel="stylesheet">
    </head>
    <body>
        <!-- incorpora todo o conteudo do site -->
        <section class="container">
            

            <main class="main">
                <main class="conteudo">
                    <section class="linha-adicionar-produto">
                        <figure class="foto-produto">
                            <a href="img/package.png" rel="lightbox"><img src="img/package.png" title="Foto do Produto"></a>
                        </figure>
                        <form action="" class="pesquisa-produto">
                            <div class="container-campo produto">
                                <input type="text" class="campo-formulario" id="produto">
                                <label for="produto" class="descricao-campo">Escaneie ou digite o código do produto</label>
                            </div>
                            <div class="container-campo qtde">
                                <input type="number" class="campo-formulario" id="qtde">
                                <label for="qtde" class="descricao-campo">Qtde.</label>
                            </div>
                            <input type="submit" id="btn-pesquisa-produto">
                            <label class="btn-cadastro btn-pesquisa-produto-label" for="btn-pesquisa-produto"><div>adicionar ao carrinho</div></label>
                        </form>
                    </section>
                    <section class="linha-conteudo-venda">
                        <section class="tabela-itens-venda table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Descrição</th>
                                        <th>Qtde.</th>
                                        <th>R$ Unit.</th>
                                        <th>R$ Total</th>
                                        <th>Opções</th>
                                    </tr>
                                </thead>
                                <tbody id="tabelaOs">
                                    <tr>
                                        <td>1</td>
                                        <td>Formatação Sistema Operacional</td>
                                        <td><input type="number" min="1" class="campo-tabela" id="qtdeItem1" name="qtdeItem" value="6"></td>
                                        <td class="valor-unit1">60,00</td>
                                        <td class="valor-total1"></td>
                                        <td>
                                            <i class="fas fa-edit"></i>
                                            <i class="fas fa-trash"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Formatação Sistema Operacional</td>
                                        <td><input type="number" min="1" class="campo-tabela" id="qtdeItem2" name="qtdeItem" value="2"></td>
                                        <td class="valor-unit2">17,65</td>
                                        <td class="valor-total2"></td>
                                        <td>
                                            <i class="fas fa-edit"></i>
                                            <i class="fas fa-trash"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Formatação Sistema Operacional</td>
                                        <td><input type="number" min="1" class="campo-tabela" id="qtdeItem3" name="qtdeItem" value="4"></td>
                                        <td class="valor-unit3">60,00</td>
                                        <td class="valor-total3"></td>
                                        <td>
                                            <i class="fas fa-edit"></i>
                                            <i class="fas fa-trash"></i>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                        <section class="informacoes-venda">
                            
                            
                            
                            <!-- tabela invisivel para armazenar os dados dos produtos 
            
            <table id="tabela-invisivel" style="display:none">
                <thead>
                    <tr>
                        <th>idproduto</th>
                        <th>codigo</th>
                        <th>descricao</th>
                        <th>categoria</th>
                        <th>qtde_estoque</th>
                        <th>qtde_minima</th>
                        <th>qtde_maxima</th>
                        <th>valor_custo</th>
                        <th>valor_venda</th>
                        <th>status</th>
                        <th>marca</th>
                    </tr>
                </thead>
                <jsp:useBean class="model.Produto" id="produto"/>
                <tbody>
                    
                    <c:forEach var="c" items="${produto.lista}">
                        
                    <tr>
                        <td>${c.idproduto}</td>
                        <td>${c.codigo_interno}</td>
                        <td>${c.descricao}</td>
                        <td>${c.categoria}</td>
                        <td>${c.qtde_estoque}</td>
                        <td>${c.qtde_minima}</td>
                        <td>${c.qtde_maxima}</td>
                        <td>${c.valor_custo}</td>
                        <td>${c.valor_venda}</td>
                        <td>
                            <c:if test="${c.status==1}">Ativo</c:if>
                            <c:if test="${c.status==2}">Inativo</c:if>
                        </td>
                        <td>${c.marca.nome}</td>
                    </tr>
                    
                    </c:forEach>
                    
                </tbody>
            </table>
                            
                            
                    -->        
                            
                        </section>
                    </section>
                    <section class="linha-resumo-venda">
                        <section class="conteudo-resumo-venda">
                            <section class="valor-total-venda">
                                <label class="titulo-valor-total">valor total da venda <i class="fas fa-arrow-circle-right"></i></label>
                                <p class="dado-valor-total"></p>
                            </section>
                            <section class="btns-acao-venda">
                                <label class="btn-cadastro btn-cancelar-venda"><div>cancelar venda</div></label>
                                <label class="btn-cadastro btn-finalizar-venda"><div>finalizar venda</div></label>
                            </section>
                        </section>
                    </section>
                </main>
            </main>
        </section>
        
    <!-- scripts -->
    <script src="js/menu.js"></script>
    <script src="js/abre-caixa-pesquisa.js"></script>
    <script src="js/cadastro-funcionario.js"></script>
    <script src="lightbox/js/lightbox-plus-jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
    
    </body>
</html>