I have 2 tables (tab1 and tab2) tab1 has 'inputs' to register information. The tab2 returns products already registered in the database.
I would like to create a function that when selecting the line (checkbox) the value of "td" "valproduto" would be sent to the first line of tab1 in the "valprod" field. I'm using an example of another question ( From a table to another html table ) but in this example tab1 gets all the value of "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>Tabela1</h1><aonclick="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>