Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

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 htmlDe uma tabela para outra tabela html) porém neste exemplo a tab1 recebe todo o valor da "tr".

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".

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".

Atualizado código. Alterado linhas tab2 <td><input type="text" value="10"></td> para <td>10</td> .
Fonte Link
GiaN
  • 43
  • 6

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

Gostaria de criar uma função que faria um clone de algumas das informações dos produtos selecionadosao selecionar a linha(com checkbox/tab2checkbox) o valor da "td" "valproduto" fosse enviada para a primeira linha da tab1 no campo "valprod". obs: minha tabela1 é dinâmicaEstou 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" id="form1">
method="post">
    <table id="tab1" nome="tab1">
        <thead>
        <tr>
            <th>Valor do Produto</th>
            <th>Preço de Venda</th>
      </tr>
    </thead>tr>
    <tbody>
      <tr></thead>
        <td><a href="#">+</a><tbody>
        <tr>
  <input type="text" name="valprod" value="50">
       <td><a <href="#">+</td>a>
        <td>
          <input type="text" name="prcvenda"name="valprod" value="">value="50">
            </td>
        <td>
    <td>
      <a href="#" onclick="RemoveTablePRow(this)">Remover Linha</a>
       <input type="text" </td>name="prcvenda" value="">
      </tr>

    </tbody>
  </table>td>
  <hr>
 <h1>
Tabela 2
</h1>
  <table id="tab2" nome="tab2">
    <thead><td>
      <tr>
        <th>Selecionar</th>
     <a href="#" onclick="RemoveTablePRow(this)">Remover <th>Codigo<Linha</th>a>
        <th>Descrição</th>
        <th>Valor<</th>td>
        <th>Data Validade<</th>tr>
   
    </tr>
    </thead>tbody>
    <tbody></table>
      <tr><hr>
        <td><h1>
          <inputTabela type="checkbox">2
        </td>h1>
      <table id="tab2" <td>nome="tab2">
          <input type="text" value="0001"><thead>
        </td><tr>
        <td>
        <th>Selecionar</th>
  <input type="text" value="Caneta">
        <<th>Codigo</td>th>
        <td>
        <th>Descrição</th>
  <input type="text" value="1,00">
        <<th>Valor</td>
th>        <td>
     
      <input type="text" value="01/01</2020">tr>
        </td>thead>
      </tr>
      <tr><tbody>
        <td><tr>
          <input type="checkbox">
        </td><td>
        <td>
        <input type="checkbox">
 <input type="text" value="0001">
         </td>
        <td>
       <td><a href="#">001</a></td>
  <input type="text" value="Caneta">
        <<td>Caneta</td>
        <td>
          <input type="text" value="1<td>23,00">
        <00</td>
        <td>
     </tr>     <input type="text" value="01/01/2020">
        </td>
      </tr>
tbody>
    </tbody>table>
  </table>
  <button type="submit">Enviar<class="btn_enviar">Enviar</button>
</form>

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 faria um clone de algumas das informações dos produtos selecionados(com checkbox/tab2) para a tab1. obs: minha tabela1 é dinâmica.

(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" id="form1">

  <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>
        <th>Data Validade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>
          <input type="text" value="0001">
        </td>
        <td>
          <input type="text" value="Caneta">
        </td>
        <td>
          <input type="text" value="1,00">
        </td>
        <td>
          <input type="text" value="01/01/2020">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>
          <input type="text" value="0001">
        </td>
        <td>
          <input type="text" value="Caneta">
        </td>
        <td>
          <input type="text" value="1,00">
        </td>
        <td>
          <input type="text" value="01/01/2020">
        </td>
      </tr>

    </tbody>
  </table>
  <button type="submit">Enviar</button>
</form>

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>
Fonte Link
GiaN
  • 43
  • 6

Copiar dados de uma tabela para outra JS / HTML

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 faria um clone de algumas das informações dos produtos selecionados(com checkbox/tab2) para a tab1. obs: minha tabela1 é dinâmica.

(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" id="form1">

  <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>
        <th>Data Validade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>
          <input type="text" value="0001">
        </td>
        <td>
          <input type="text" value="Caneta">
        </td>
        <td>
          <input type="text" value="1,00">
        </td>
        <td>
          <input type="text" value="01/01/2020">
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>
          <input type="text" value="0001">
        </td>
        <td>
          <input type="text" value="Caneta">
        </td>
        <td>
          <input type="text" value="1,00">
        </td>
        <td>
          <input type="text" value="01/01/2020">
        </td>
      </tr>

    </tbody>
  </table>
  <button type="submit">Enviar</button>
</form>