Los pasos son los siguientes:
- Obtienes la fila a la que pertenece el botón, lo haces por medio de la propiedad
parentNode
o por medio de parent()
si usas jQuery.
- Extras las celdas (td) de esa fila (solo los valores que usarás).
- Creas una celda por cada valor extraído y pones ese mismo valor en la nueva celda de la tabla destino.
- Creas una celda y creas el
<input type="number" ... />
para la cantidad. Agregas el input a la celda.
- Creas una celda y creas el
<button ...>Descartar</button>
para descartar ese producto. Agregas el botón a la celda.
- Agregas las celdas a una nueva fila, y esa fila al
<tbody>
de la tabla destino.
function add(button) {
var row = button.parentNode.parentNode;
var cells = row.querySelectorAll('td:not(:last-of-type)');
addToCartTable(cells);
}
function remove() {
var row = this.parentNode.parentNode;
document.querySelector('#target tbody')
.removeChild(row);
}
function addToCartTable(cells) {
var code = cells[1].innerText;
var name = cells[2].innerText;
var price = cells[3].innerText;
var newRow = document.createElement('tr');
newRow.appendChild(createCell(code));
newRow.appendChild(createCell(name));
newRow.appendChild(createCell(price));
var cellInputQty = createCell();
cellInputQty.appendChild(createInputQty());
newRow.appendChild(cellInputQty);
var cellRemoveBtn = createCell();
cellRemoveBtn.appendChild(createRemoveBtn())
newRow.appendChild(cellRemoveBtn);
document.querySelector('#target tbody').appendChild(newRow);
}
function createInputQty() {
var inputQty = document.createElement('input');
inputQty.type = 'number';
inputQty.required = 'true';
inputQty.min = 1;
inputQty.className = 'form-control'
return inputQty;
}
function createRemoveBtn() {
var btnRemove = document.createElement('button');
btnRemove.className = 'btn btn-xs btn-danger';
btnRemove.onclick = remove;
btnRemove.innerText = 'Descartar';
return btnRemove;
}
function createCell(text) {
var td = document.createElement('td');
if(text) {
td.innerText = text;
}
return td;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#target td {
/* para centrado vertical de contenido */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table id="source" class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Código</th>
<th>Nombre</th>
<th>Precio</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C1483</td>
<td>Laptop HP CX44</td>
<td>$844.90</td>
<td>
<button onclick="add(this)" class="btn btn-primary btn-xs">
Agregar
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table id="target" class="table table-bordered table-hover">
<thead>
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Con jQuery es mucho más sencillo aún:
En lugar de hacer uso de document.createElement
, solo haces uso del método append
y le pasas como string el elemento a agregar. Por ejemplo:
$(newRow).append('<td>' + code + '</td>');
Y para descartar un producto:
var row = $(this).parent().parent();
$('#target tbody').remove(row);
Actualizar el precio según cambie la cantidad
Para actualizar el precio según se aumente/disminuye la cantidad, es necesario colocar un escuchador por evento change
al input de cantidad. Además, por razones de comodidad, guardamos el precio del producto en un atributo data-price
cada vez que agregamos una fila a la tabla destino.
En la nueva fila añadimos:
newRow.setAttribute('data-price', price.substring(1));
Al <input />
de cantidad le añadimos el escuchador:
inputQty.onchange = onQtyChange;
Y el escuchador para el evento de cambio:
function onQtyChange(e) {
var row = this.parentNode.parentNode;
var cellPrice = row.querySelector('td:nth-child(3)');
var prevPrice = Number(row.getAttribute('data-price'));
var newQty = Number(this.value);
var total = prevPrice * newQty;
cellPrice.innerText = '$' + total;
}
Resultado
function add(button) {
var row = button.parentNode.parentNode;
var cells = row.querySelectorAll('td:not(:last-of-type)');
addToCartTable(cells);
}
function remove() {
var row = this.parentNode.parentNode;
document.querySelector('#target tbody')
.removeChild(row);
}
function addToCartTable(cells) {
var code = cells[1].innerText;
var name = cells[2].innerText;
var price = cells[3].innerText;
var newRow = document.createElement('tr');
newRow.setAttribute('data-price', price.substring(1));
newRow.appendChild(createCell(code));
newRow.appendChild(createCell(name));
newRow.appendChild(createCell(price));
var cellInputQty = createCell();
cellInputQty.appendChild(createInputQty());
newRow.appendChild(cellInputQty);
var cellRemoveBtn = createCell();
cellRemoveBtn.appendChild(createRemoveBtn())
newRow.appendChild(cellRemoveBtn);
document.querySelector('#target tbody').appendChild(newRow);
}
function createInputQty() {
var inputQty = document.createElement('input');
inputQty.type = 'number';
inputQty.required = 'true';
inputQty.className = 'form-control'
inputQty.min = 1; // mínimo un producto
inputQty.onchange = onQtyChange;
return inputQty;
}
function createRemoveBtn() {
var btnRemove = document.createElement('button');
btnRemove.className = 'btn btn-xs btn-danger';
btnRemove.onclick = remove;
btnRemove.innerText = 'Descartar';
return btnRemove;
}
function createCell(text) {
var td = document.createElement('td');
if(text) {
td.innerText = text;
}
return td;
}
function onQtyChange(e) {
var row = this.parentNode.parentNode;
var cellPrice = row.querySelector('td:nth-child(3)');
var prevPrice = Number(row.getAttribute('data-price'));
var newQty = Number(this.value);
var total = prevPrice * newQty;
cellPrice.innerText = '$' + total;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#target td {
/* para centrado vertical de contenido */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table id="source" class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Código</th>
<th>Nombre</th>
<th>Precio</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C1483</td>
<td>Laptop HP CX44</td>
<td>$844.90</td>
<td>
<button onclick="add(this)" class="btn btn-primary btn-xs">
Agregar
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table id="target" class="table table-bordered table-hover">
<thead>
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>