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>