Take the column values of the clicked row and pass inputs

Question

Take the column values of the clicked row and pass inputs

Asked 7 years ago

Viewed 1,276 times

0

Here is the function to take the table row value, and pass to inputs, if I take the lines that were loaded from the error database but when, insert a new item into the table, then I take the value of the 2 row column, in the test alert display normal text but when step to inputs, fields mix, never seen anything like it, the description input appears with array inside.

<br /><label for="resultDescricao">Descrição do item</label>
        <input type="text" id="resultDescricao" name="resultDescricao" readonly >

        <br /><br /><label>Modelo:</label>
        <input type="text" id="modelo" onchange="montarDescricao()" style="text-transform: uppercase; display: inline-block" onkeyup="montarDescricao()">

        <br /><br /><label for="obs_item">Obs:</label>
        <input type="text" name="obs_item" id="obs_item" onchange="montarDescricao()" style="text-transform: uppercase; display: inline-block" onkeyup="montarDescricao()">

        <br />
        <label for="obs" ></label>
        <input type="hidden" id="obs" name="obs">

        <br /><label for = "medida">Medida:</label>
        <input type = "text" id = "medida" onchange = "montarDescricao()"  placeholder="0,00" style = "text-transform: lowercase; display: inline-block" onkeyup = "montarDescricao()">

        <br /><br /><label for="bracoesq">Braço esq.:</label>
        <input type="text" id="bracoesq" onchange="montarDescricao()" style="text-transform: uppercase" onkeyup="montarDescricao()">

        <br /><label for="modulo">Módulo</label>
        <input type="text" name="modulo" id="modulo" onchange = "montarDescricao()" placeholder="2x0,00"style = "text-transform: lowercase; display: inline-block" onkeyup = "montarDescricao()">

        <br /><br /><label for="bracodir">Braço dir.:</label>
        <input type="text" id="bracodir" onchange="montarDescricao()" style="text-transform: uppercase"  onkeyup="montarDescricao()">

        <label for="revestimento">Revestimento</label>
        <select name="revestimento" id="revestimento" class="revestimento" onChange="montarDescricao()">
            <option value="">  Selecione um Revestimento</option>
            <?php foreach ($revestimento_list as $rl): ?>
                <option value="<?php echo $rl['id'] ?>"><?php echo $rl['nomedesc']; ?></option>
            <?php endforeach; ?>
        </select><br />

        <br /><label for="vlr_unitario">Vlr. unitário</label>
        <input type="text" name="vlr_unitario" value="R$ 0,00" id="vlr_unitario" data-prefix="R$ " class="dinheiro" >

        <br /><label for="qtde">Qtde</label>
        <input type="number" name="qtde" id="qtde" onkeyup="so_numero(this)" value="1" min="1" >

        <br /><br /><label for="num_modulos">Qtde módulos</label>
        <input type="number" name="num_modulos" id="num_modulos"  value="2" min="1" />

        <input type="button" onclick="addProd()" id="add_prod" value="adicionar produto" style="background-color: #faac58"/>

        <br />
        <input type="text" name="json_prod" id="json_prod">
        <?php
    endforeach;
    ?>
</fieldset>
</fieldset>
<table border="0" width="100%" id="products_table">
<thead>
<tr>
    <th>ID</th>
    <th>Nome do Produto</th>
    <th>Quant.</th>
    <th>Módulos</th>
    <th>Obs.</th>
    <th>Preço Unit.</th>
    <th>Sub-Total</th>
    <th class="acoes">Ações</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

 function pegar_valor_linha_tabela_editar(elemento) {
var id = $(elemento).closest('tr').find('td').eq('0').text().trim();  // recebe id  
var descricao = $(elemento).closest('tr').find('td').eq('1').html();  // recebe descriçao completa
var qtde = $('input[name="quant[' + id + ']"]').val().trim(); // recebe quantidade
var num_modulos = $(elemento).closest('tr').find('td').eq('3').text().trim(); // recebe numero de modulos
var obs_item = $(elemento).closest('tr').find('td').eq('4').text().trim(); // recebe observacao
var vlr_unitario = $(elemento).closest('tr').find('td').eq('5').text().trim(); // recebe valor unitario
OBJ = $(elemento).closest("tr"); //recebe objeto da linha

if (id === 0) {
    return;
} else {
    $('#id').val(id);

    //inicio quebra descriçao
    //aqui e coluna 2 da tabela eu pego e divico essas descrição
    var descricaoArray = descricao.split('[');
    var modelo = descricaoArray[0].trim();
    var medida = descricaoArray[1].trim();
    var bracoesq = descricaoArray[2].trim();
    var modulo = descricaoArray[3].trim();
    var bracodir = descricaoArray[4].trim();
    var revestimento = descricaoArray[5].split(']');

   //fim do quebra descrição

    $('#resultDescricao').val(descricao);
    $('#modelo').val(modelo); 
    $('#medida').val(medida.replace(']', ''));
    $('#bracoesq').val(bracoesq.replace(']', '').replace('BRE', ''));
    $('#modulo').val(modulo.replace(']', '')); 
    $('#bracodir').val(bracodir.replace(']', '').replace('BRD', '')); 
    $('#revestimento option:contains(' + revestimento[0] + ')').prop('selected', true);
    $('#obs_item').val($.trim(obs_item));
    $('#vlr_unitario').val(vlr_unitario.replace(' ', ''));
    $('#qtde').val($('input[name="quant[' + id + ']"]').val());
    $('#num_modulos').val(num_modulos);
    excluirProd(elemento);
}

}

Description model

// CALIFORNIA [2,90] [BRE25] [3x80] [BRD25] [ARTIGO: 1.000 - COR: 02] - COM MAIS PUXES

At the time of error

// 3 [CALIFORNIA [2,90] [BRE25] [3x80] [BRD25] [ARTIGO: 1.000 - COR: 02]] [BRE] [ 2] [BRD ] [ R$ 0,00]

Measured field

// CALIFORNIA [2,90] [BRE25] [3x80] [BRD25] [ARTIGO: 1.000 - COR: 02]

Even in the alert displaying that data is being passed to inputs correctly, display all wrong, never seen this variable pick up value without being declared

Function to add products

function addProd() {
if ($('#modelo').val() === '') {
    alert('Informe um Modelo !');
    return;
}
if ($('#revestimento').val() === '') {
    alert('Selecione um Revestimento !');
    return;
}
if ($('#num_modulos').val() === '') {
    alert('Selecione a Quantidade de Módulos !');
    return;
}
if ($('#bracoesq').val() === '') {
    alert('Informe a medida Braço Esquerdo !');
    return;
}  
 if ($('#bracodir').val() === '') {
    alert('Informe a medida Braço Direito !');      
    return;
}
var products_table = document.getElementById('products_table');
var id = products_table.rows.length;
var name = document.getElementById('resultDescricao').value;
var price = document.getElementById('vlr_unitario').value.replace(/[ R|$|.]/gi, '').replace(/[,]/gi, '.');
var qtde = document.getElementById('qtde').value;
var num_modulos = document.getElementById('num_modulos').value;
var obs_item = document.getElementById('obs_item').value;

subtotal = price * parseInt(qtde);
subtotal = ("R$ " + number_format(subtotal, 2, ',', '.'));
price = ("R$ " + number_format(price, 2, ',', '.'));


incluir_produto();
document.getElementById('resultDescricao').value = "";
document.getElementById('modelo').value = "";
document.getElementById('vlr_unitario').value = 'R$0,00';
document.getElementById('bracoesq').value = "";
document.getElementById('bracodir').value = "";
$("#revestimento").val($("#revestimento option:first").val());
document.getElementById('qtde').value = "1";
document.getElementById('medida').value = "";
document.getElementById('modulo').value = "";
document.getElementById('obs_item').value = "";

if ($('input[name="quant[' + id + ']"]').length !== 0) {
    id = parseInt(id) + 1;

}

if ($('#id').val() != '') {              
   var tr =
   '<tr class="classeDaLinha" id="r'+id+'">' +
   '<td class="id" id="id"  >' + id + '</td>' +
   '<td class="name">' + name + '</td>' +
   '<td class="qtde" >' +
   '<input style="width:50px;" type="number" name="quant[' + id + ']" id="quant[' + id + ']" class="p_quant" value="' + qtde + '"  onkeyup="updateSubtotal(this)" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
   '</td>' +
   '<td class="num_modulos"> ' + num_modulos + '</td>' +
   '<td class="obs_item"> ' + obs_item + '</td>' +
   '<td class="price"> ' + price + '</td>' +
   '<td class="subtotal">' + subtotal + '</td>' +
   '<td><img src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete" onclick="excluirProd(this)"/>\n\
           <img src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar" onclick="pegar_valor_linha_tabela_editar(this)"/></td>' +
   '</tr>';
   OBJ.prev().after(tr); //colocar o novo tr antes deste
   OBJ.remove();
   var contador = 1;
   $(".classeDaLinha").each(function () {
             $(this).find("#id").html(contador);
           $(this).find(".p_quant").prop("name", "quant[" + contador + "]");
         contador++;
   });
   $(OBJ).closest('tr').show();
   $('#id').val('');           
} else {
    var tr =
    '<tr class="classeDaLinha">' +
    '<td class="id" id="id"  >' + id + '</td>' +
    '<td class="name">' + name + '</td>' +
    '<td class="qtde" >' +
    '<input style="width:50px;" type="number" name="quant[' + id + ']" id="quant[' + id + ']" class="p_quant" value="' + qtde + '"  onkeyup="updateSubtotal(this)" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
    '</td>' +
    '<td class="num_modulos"> ' + num_modulos + '</td>' +
    '<td class="obs_item"> ' + obs_item + '</td>' +
    '<td class="price"> ' + price + '</td>' +
    '<td class="subtotal">' + subtotal + '</td>' +
    '<td class="acoes"><img src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete" onclick="excluirProd(this)"/>\n\
            <img src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar" onclick="pegar_valor_linha_tabela_editar(this)"/></td>' +
    '</tr>';
$('#products_table tbody').append(tr);
}
updateTotal();
preencherJason();
}

Here request to load database items and create lines

function carregar_itens_pedido(id_pedido)
{
 $.ajax
        ({
            type: 'POST',
            dataType: 'json',
            url: BASE_URL + '/pedidos/carregar_itens_pedido',
            data: {id_pedido: id_pedido},
            success: function (arrayRetorno)
            {                 
                $("#products_table tbody").empty();
                tr = "";
                for (var index in arrayRetorno) {
                    subTotal = arrayRetorno[index].vlr_unitario * arrayRetorno[index].vlr_unitario.qt;
                    id = arrayRetorno[index].id;
                    num_sofa = arrayRetorno[index].num_sofa;
                    name = arrayRetorno[index].nomedesc;
                    price = arrayRetorno[index].vlr_unitario;
                    qtde = arrayRetorno[index].qt;
                    num_modulos = arrayRetorno[index].num_modulos;
                    obs_item = arrayRetorno[index].obs_item;

                    subtotal = price * qtde;
                    subtotal = ("R$ " + number_format(subtotal, 2, ',', '.'));
                    price = ("R$ " + number_format(price, 2, ',', '.'));

                    if (qtde === null) {
                        qtde = '';
                    }
                    tr +=   '<tr class="classeDaLinha" >' +
                    '<td class="id" id="id">' + id + '</td>' +
                    '<td class="name">' + name + '</td>' +
                    '<td class="qtde" >' +
                    '<input style="width:50px;" type="number" name="quant[' + id + ']" id="quant[' + id + ']" class="p_quant" value="' + qtde + '"  onkeyup="updateSubtotal(this)" onchange="updateSubtotal(this)" data-price="' + price + '" />' +
                    '</td>' +
                    '<td class="num_modulos"> ' + num_modulos + '</td>' +
                    '<td class="obs_item"> ' + obs_item + '</td>' +
                    '<td style="width:100px;" class="price"> ' + price + '</td>' +
                    '<td style="width:100px;" class="subtotal">' + subtotal + '</td>' +
                    '<td class="acoes"><img src="' + BASE_URL + '/assets/images/delete.png" width="20" height="20" title="Delete" onclick="excluirProd(this)"/>\n\
                    <img src="' + BASE_URL + '/assets/images/edit.png" width="20" height="20" title="Editar" onclick="pegar_valor_linha_tabela_editar(this)"/></td>' +
                    '</tr>';                           
                }
                $('#products_table tbody').append(tr);                                
                updateTotal();
                preencherJason();
             }
        });
      }

1

It’s best to create a minimum verifiable example join some html so that it is possible to test and see the problem itself. See in this fiddle as the code you have obtains the values of tds works, assuming they are as html

– Isac

2017/10/31 at 20:13
I changed here, but the error must be time to break the description

– Junior Ramoty

2017/11/01 at 04:36
Post HTML, so it’s easier to simulate here

– Caique Romero

2017/11/01 at 14:49
I already posted the html

– Junior Ramoty

2017/11/02 at 02:52
https://jsfiddle.net/ramoty/971yLqpL/20/#&togetherjs=3REa548L8v @Isac

– Junior Ramoty

2017/11/02 at 14:42

1 answer

Browser other questions tagged jquery table table índices click

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

by Junior Ramoty • **151** points · Answer 1 · 2017-11-03T05:09:38+00:00

Vlw by the help ai, the error was in a loop to create table that displayed the items of the database already registered, I put the code I used to solve. Firedebug saving again.

function pegar_valor_linha_tabela(elemento) {
var modelo = $(elemento).closest('tr').find('td').eq('0').html().trim();
var medida = $(elemento).closest('tr').find('td').eq('1').text().trim();
var bracoesq = $(elemento).closest('tr').find('td').eq('2').text().trim();
var modulo = $(elemento).closest('tr').find('td').eq('3').text().trim();
var bracodir = $(elemento).closest('tr').find('td').eq('4').text().trim();
var revestimento = $(elemento).closest('tr').find('td').eq('5').text().trim();
$('#resultDescricao').val(modelo + ' [' + medida + '] [BRE' + bracoesq+ '] [' + modulo + '] [BRD' + bracodir + '] [' + revestimento + ']');
$('#modelo').val(modelo);
$('#medida').val(medida);
$('#bracoesq').val(bracoesq);
$('#modulo').val(modulo);
$('#bracodir').val(bracodir);
$('#revestimento option:contains(' + revestimento + ')').prop('selected', true);
var botao = document.getElementById("modulo");
botao.click();
}