1

Tenho 2 tabelas (tab1 e tab2) a tab1 possui 'inputs' pra cadastrar informações. A tab2 retorna produtos já cadastrados na base de dados.

Gostaria de criar uma função que ao selecionar a linha(checkbox) o valor da "td" "valproduto" fosse enviada para a primeira linha da tab1 no campo "valprod". Estou usando um exemplo de outra pergunta(De uma tabela para outra tabela html) porém neste exemplo a tab1 recebe todo o valor da "tr".

var adicionar = document.querySelectorAll("input[type='checkbox']");

var tab1 = document.querySelector("#tab1 tbody");
var tab2 = document.querySelector("#tab2 tbody");
var adicionarOnClick = function () {    
    var escopo = this.checked ? tab1 : tab2;   
    escopo.appendChild(this.parentNode.parentNode);
};

for (var indice in adicionar) {
    adicionar[indice].onclick = adicionarOnClick;
}

//---------------------------
    (function ($) {
        RemoveTablePRow = function (handler) {
            var tr = $(handler).closest('tr');

            tr.fadeOut(200, function () {
                tr.remove();
            });

            return false;
        };
    })(jQuery);

    (function ($) {
        AddTablePRow = function () {
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td><a href="#">+</a><input type="text" name="valprod" value="0"></td>';
            cols += '<td><input type="text" name="prcvenda" value=""></td>';
            cols += '<td <a href="#" class="removerCampo" onclick="RemoveTablePRow(this)">Remover Linha</a></td>';
            newRow.append(cols);
            $("#tab1").append(newRow);

            return false;
        };
    })(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    Tabela 1
</h1>
<a onclick="AddTablePRow()" href="#">Adicionar</a>
<form method="post">
    <table id="tab1" nome="tab1">
        <thead>
        <tr>
            <th>Valor do Produto</th>
            <th>Preço de Venda</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><a href="#">+</a>
                <input type="text" name="valprod" value="50">
            </td>
            <td>
                <input type="text" name="prcvenda" value="">
            </td>
            <td>
                <a href="#" onclick="RemoveTablePRow(this)">Remover Linha</a>
            </td>
        </tr>

        </tbody>
    </table>
    <hr>
    <h1>
        Tabela 2
    </h1>
    <table id="tab2" nome="tab2">
        <thead>
        <tr>
            <th>Selecionar</th>
            <th>Codigo</th>
            <th>Descrição</th>
            <th>Valor</th>            
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td><a href="#">001</a></td>
            <td>Caneta</td>
            <td>23,00</td>
        </tr>       
        </tbody>
    </table>
    <button class="btn_enviar">Enviar</button>
</form>

6
  • Olá, verifique se dessa forma será útil > jsfiddle.net/4Lpu7vao . Se sim, me avise que publico como resposta. Commented 17/06/2016 às 11:49
  • Olá @LucaoA, com base no seu código estou adicionando os valores dos campos em variáveis(var valprod = $(this).find('[id="valprod"]').val();), para depois adicionar nos campos da tabela1. Esta seria a forma correta a fazer?
    – GiaN
    Commented 20/06/2016 às 19:50
  • não recomendo você a trabalhar com id, porque id tem que ser exclusivo, o javascript sempre vai pegar o primeiro que encontrar. Recomendo trocar por classes. Outra coisa, seria melhor se você atualizasse o jsfiddle que assim posso te ajudar melhor. Commented 20/06/2016 às 22:07
  • Bom... pela forma como estava fazendo não funcionou muito. Acabei testando outra maneira para copiar os dados, porém não está exatamente da forma como eu preciso. exemplo: jsfiddle.net/LGian/4Lpu7vao/3
    – GiaN
    Commented 20/06/2016 às 22:29
  • @GaiN, esse post vai lhe ajudar, stackoverflow.com/questions/1954426/… Commented 21/06/2016 às 14:47

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .