Take column data from a given row with Jquery

Question

Take column data from a given row with Jquery

Asked 5 years, 7 months ago

Viewed 290 times

0

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:

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.
How to return values of <td> related that code.
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>

Correction: How to return the COLUMN values related to that code.

– Sallazar

2019/04/13 at 05:04
I think you can do that with ajax. You create an event click that by clicking the button, then you take the value of that <td> field from the table and send this value to your file that does the query in the database, in the query file you use this value as Where condition in select. Finally, it returns the value of the query, takes the done(return) of the ajax and displays what you want on the screen. (It was a very generic explanation, you can’t explain much without seeing your code).

– Gato de Schrödinger

2019/04/13 at 12:51
Boaa, I’ll put the page code for you to take a look. I’m using JSP

– Sallazar

2019/04/13 at 13:34
I could not understand very well what you want to do, what column is this? what code is this? It would be better to make a minimum, complete and verifiable example

– JrD

2019/04/13 at 15:46

No answers

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.