Складывать стоимость динамической таблицы

Я ищу способ складывать стоимость динамической таблицы, созданной начиная с Javascript. Я хочу, чтобы стоимость линии цены прибавилась, и мне дало общее количество в #spTotal.

Я оставляю код:

function add(button) {
	var row = button.parentNode.parentNode;
	var cells = row.querySelectorAll('td:not(:last-of-type)');
	addToCartTable(cells);
	button.disabled = true;
};
function remove() {
	var row = this.parentNode.parentNode;
	document.querySelector('#target tbody')
	.removeChild(row);
};
function addToCartTable(cells) {
	var name = cells[0].innerText;
	var price = cells[1].innerText;

	var newRow = document.createElement('tr');
	newRow.setAttribute('data-price', price.substring(0));

	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; Calcular;
	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  totalitem = 0;
	var tr = this.parentNode.parentNode;
	var nodes = tr.childNodes;
	for (var x = 0; x<nodes.length;x++) {
		if (nodes[x].firstChild.name == 'totalitem') {
			totalitem = nodes[x].firstChild.value;
		}
	}
	var total = document.getElementById("spTotal");
	if (total.innerHTML == 'NaN') {
		total.innerHTML = 0;
	}
	total.innerHTML = parseFloat(total.innerHTML)+totalitem;
}
<div id="container">
<div class="table-responsive">
  <table id="source" class="table table-bordered table-hover">
    <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Acciones</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hemograma</td>
        <td>200</td>
        <td>
        <button onclick="add(this)" class="btn btn-primary btn-xs">
          Agregar
        </button>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>General de Orina</td>
        <td>100</td>
        <td>
          <button onclick="add(this)" class="btn btn-primary btn-xs">
            Agregar
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<hr/>
<div class="table-responsive">
  <table id="target" class="table table-bordered table-hover">
    <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Acciones</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    <td>Total</td>
    <td id="spTotal"></td>
    </tfoot>
  </table>
</div>
3
задан 03.01.2017, 09:47
0 ответов

Он делает время формулируйте тот же вопрос, но у меня была проблема с совместимостью браузеров (Chrome и Firefox). Так что я принял решение работать с JQUERY, чтобы эти проблемы убереглись. В настоящее время я работаю с этим кодом:

$(".btn_add").on("click", function() {
  var column1 = $(this).closest('tr').children()[0].textContent;
  var column2 = $(this).closest('tr').children()[1].textContent;
  var column4 = $(this).closest('tr').children()[3].textContent;
  var column5 = $(this).closest('tr').children()[4].textContent;
  
 if($("#second_table .copy_"+column1).length == 0)
  {

    $("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' class='entrada' min='0' value='0'></td><td class='subtotal'>0</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
  }
  
});

$("#second_table").on("input", "input", function() {
  var input = $(this);
  var columns = input.closest("tr").children();
  var price = columns.eq(3).text();
  var calculated = input.val() * price;
  columns.eq(5).text(calculated.toFixed(2));
  sumar_columnas();
  
});

$("body").on("click",".btn_remove", function() {
    $(this).parent().parent().remove();
});

function sumar_columnas(){
var sum=0;
    //itera cada input de clase .subtotal y la suma
    $('.subtotal').each(function() {     
            sum += parseFloat($(this).text());                     
    }); 
    //cambia valor del total y lo redondea a la segunda decimal
    $('#totaltotal').val(sum.toFixed(2));
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="first_table" class="table table-bordered">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Category</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Monitor A</td>
      <td>X</td>
      <td>5</td>
      <td>7.5</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mouse B</td>
      <td>X</td>
      <td>5</td>
      <td>12.4</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Keyboard D</td>
      <td>X</td>
      <td>8</td>
      <td>22.35</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Motherboard C</td>
      <td>Y</td>
      <td>14</td>
      <td>50</td>
      <td>
        <button class="btn btn-info btn_add">+ Add</button>
      </td>
    </tr>
  </tbody>
</table>

<br>

<table id="second_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th># Code</th>
      <th>Product</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Input</th>
      <th>Calculated Field</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

	            <div class="form-group col-sm-4">
			      <label for="igv">IGV:</label>
			        <input type="text" class="form-control"disabled id="igv">
			    </div>
			    
			    <div class="form-group  col-sm-4">
			      <label for="total">SubTotal:</label>
			        <input type="text" class="form-control" disabled id="total">
			    </div>


				<div class="form-group  col-sm-4">
			      <label for="totaltotal">Total:</label>
			        <input type="text" class="form-control" disabled id="totaltotal">
			    </div>
4
ответ дан 03.12.2019, 17:53
  • 1
    Оно я функционирует превосходно, большое спасибо! –  03.01.2017, 07:51

Теги

Похожие вопросы