Row number, total and grand total not updating in dynamic table

Question

newmaster 0 Newbie Poster

12 Years Ago

Hi there! I am newbie in JS. I am making making class project and faced with some problems. I have found script (here) and learned. here is my problem:
1. not updating row number and row ID after deleting rows
2. not updating total sum if user change quantity
3. not updating grand total after deleting and changing quantity

Could someone help!
Here is code:

<html>
<head>
<script type="text/javascript">

  function updateSum(formID, nameID, quantityID, priceID) {
    var f = document.getElementById(formID)
    var name = document.getElementById(nameID)
    var quantity = document.getElementById(quantityID)
    var price = document.getElementById(priceID)

    if (f && name && quantity && price) {
      var tab = f.getElementsByTagName("table")[0]  // expect a table
      var row = tab.insertRow(tab.rows.length - 1)
      
	function myRowObject(one, two)
	{
		this.one = one; // text object
		this.two = two; // input text object
	}

	  var qtyVal = parseFloat(quantity.value)
      var priceVal = parseFloat(price.value)
      if (!qtyVal) { qtyVal = 0 }
      if (!priceVal) { priceVal = 0 }
      qtyVal = parseInt(Math.round(qtyVal*100),10)/100      // force 2 decimal
      priceVal = parseInt(Math.round(priceVal*100),10)/100  // force 2 decimal
      var total = qtyVal * priceVal
      total = parseInt(Math.round(total*100),10)/100      // force 2 decimal


		var noCell = row.insertCell(0)
		var txtNo = document.createElement('input');
		var id = tab.rows.length - 2
		txtNo.type = 'text';
		txtNo.style.textAlign = "right"
		txtNo.size = 1;
		txtNo.disabled = "disabled"
		txtNo.value = tab.rows.length - 2
		noCell.appendChild(txtNo);

		var nameCell = row.insertCell(1)
		var txtName = document.createElement('input');
		txtName.type = 'text';
		txtName.name = "name" + id;
		txtName.style.textAlign = "left"
		txtName.disabled = "disabled"
		txtName.size = 50;
		txtName.value = name.value
		nameCell.appendChild(txtName);

		var quanityCell = row.insertCell(2)
		var txtQuanity = document.createElement('input');
		txtQuanity.type = 'text';
		txtQuanity.name = "quantity" + id;
		txtQuanity.id = "quantity" + id;
		txtQuanity.style.textAlign = "right"
		txtQuanity.size = 10;
		txtQuanity.value = qtyVal
		quanityCell.appendChild(txtQuanity);

		var priceCell = row.insertCell(3)
		var txtPrice = document.createElement('input');
		txtPrice.type = 'text';
		txtPrice.name = "price" + id;
		txtPrice.id = "price" + id;
		txtPrice.style.textAlign = "right"
		txtPrice.size = 10;
		txtPrice.value = priceVal
		priceCell.appendChild(txtPrice);

		var totalCell = row.insertCell(4)
		var txtTotal = document.createElement('input');
		txtTotal.type = 'text';
		txtTotal.name = "total" + id;
		txtTotal.id = "total" + id;
		txtTotal.style.textAlign = "right"
		txtTotal.size = 10;
		txtTotal.value = 2;
		txtTotal.value = total;
		totalCell.appendChild(txtTotal);
		
		var sum = parseFloat(tab.rows[tab.rows.length-1].cells[4].innerHTML)
		tab.rows[tab.rows.length-1].cells[4].innerHTML = sum+total

		var cell6 = row.insertCell(5);
		var btnEl = document.createElement('input');
		btnEl.type = 'button';
		btnEl.value = 'Delete';
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell6.appendChild(btnEl);


    }
  }





	function deleteCurrentRow(rows)
	{
		var row = rows.parentElement.parentElement;
		document.getElementById('atable').deleteRow(row.rowIndex);

		var table = document.getElementById('atable')
		var rows = table.getElementsByTagName('TR');
		for(i=0; i<rows.length; i++)
		{
		row[i].txtNo[0].id = txtNo[i];
		}
		
	}

  
</script>
</head>
 
<body>
<form id="sell">
  Name: <input type="text" id="name">
  <br>
  Quantity: <input type="text" id="quantity">
  <br>
  Price: <input type="text" id="price">
  <br>
  <input type="button" value="Add" onClick="updateSum('sell', 'name', 'quantity', 'price')">
  <br><br>
  <table style="width:750;empty-cells:show;border-collapse:collapse" id="atable">
  <tr>
    <th width="50">No</th>
    <th width="400">Name</th>
    <th width="100">Quantity</th>
    <th width="100">Price</th>
    <th width="100">Total</th>
    <th></th>
  </tr>
<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td style="text-align:right;font-weight:bold">Grand Total&nbsp;</td>
    <td name="allTotal" style="text-align:right;border:1px solid gray">0</td>
    <td></td>
  </tr>
</tbody>  
  </table>
</form>
</body>
</html>

javascript

2 Contributors
2 Replies
2K Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by newmaster

All 2 Replies

AleMonteiro 238 Can I pick my title?

12 Years Ago

I've add somethings to your code to make it work like you would like it to.

To update the total and grand total after changing the value you need to listen to the input change event, so you know when to recalculate it.

<html>
<head>
<script type="text/javascript">

	function updateSum(formID, nameID, quantityID, priceID) {
		var f = document.getElementById(formID)
		var name = document.getElementById(nameID)
		var quantity = document.getElementById(quantityID)
		var price = document.getElementById(priceID)

		if (f && name && quantity && price) {
			var tab = f.getElementsByTagName("table")[0]  // expect a table
			var row = tab.insertRow(tab.rows.length - 1)

			var qtyVal = parseFloat(quantity.value)
			var priceVal = parseFloat(price.value)
			if (!qtyVal) { qtyVal = 0 }
			if (!priceVal) { priceVal = 0 }
			qtyVal = parseInt(Math.round(qtyVal*100),10)/100      // force 2 decimal
			priceVal = parseInt(Math.round(priceVal*100),10)/100  // force 2 decimal
			var total = qtyVal * priceVal
			total = parseInt(Math.round(total*100),10)/100      // force 2 decimal


			var noCell = row.insertCell(0)
			var txtNo = document.createElement('input');
			var id = tab.rows.length - 2
			txtNo.type = 'text';
			txtNo.style.textAlign = "right"
			txtNo.size = 1;
			txtNo.disabled = "disabled"
			txtNo.value = tab.rows.length - 2
			noCell.appendChild(txtNo);

			var nameCell = row.insertCell(1)
			var txtName = document.createElement('input');
			txtName.type = 'text';
			txtName.name = "name" + id;
			txtName.style.textAlign = "left"
			txtName.disabled = "disabled"
			txtName.size = 50;
			txtName.value = name.value
			nameCell.appendChild(txtName);

			var quanityCell = row.insertCell(2)
			var txtQuanity = document.createElement('input');
			txtQuanity.type = 'text';
			txtQuanity.name = "quantity" + id;
			txtQuanity.id = "quantity" + id;
			txtQuanity.style.textAlign = "right"
			txtQuanity.size = 10;
			txtQuanity.value = qtyVal
			quanityCell.appendChild(txtQuanity);

			var priceCell = row.insertCell(3)
			var txtPrice = document.createElement('input');
			txtPrice.type = 'text';
			txtPrice.name = "price" + id;
			txtPrice.id = "price" + id;
			txtPrice.style.textAlign = "right"
			txtPrice.size = 10;
			txtPrice.value = priceVal
			priceCell.appendChild(txtPrice);

			var totalCell = row.insertCell(4)
			var txtTotal = document.createElement('input');
			txtTotal.type = 'text';
			txtTotal.name = "total" + id;
			txtTotal.id = "total" + id;
			txtTotal.style.textAlign = "right"
			txtTotal.size = 10;
			txtTotal.value = 2;
			txtTotal.value = total;
			totalCell.appendChild(txtTotal);
			
			var cell6 = row.insertCell(5);
			var btnEl = document.createElement('input');
			btnEl.type = 'button';
			btnEl.value = 'Delete';
			cell6.appendChild(btnEl);
		
			// Add events to list input
			btnEl.onclick = function () {deleteCurrentRow(row)};
			txtPrice.onchange = function(){ calcValue(txtQuanity, txtPrice, txtTotal); }
			txtQuanity.onchange = function(){ calcValue(txtQuanity, txtPrice, txtTotal); }
			
			// Add value to total
			var sum = parseFloat(tab.rows[tab.rows.length-1].cells[4].innerHTML)
			tab.rows[tab.rows.length-1].cells[4].innerHTML = sum+total
		}
	}
	
	// Calcule total after chaning some input
	function calcValue(txtQuanity, txtPrice, txtTotal)
	{
		var qnt = txtQuanity.value;
		var price = txtPrice.value;
		
		txtTotal.value = parseFloat(qnt) * parseFloat(price);
		sumTotal();
	}

	// Delete row
	function deleteCurrentRow(row)
	{
		var tab = document.getElementById('atable');	
		tab.deleteRow(row.rowIndex);

		for(var i=1; i < tab.rows.length-1; i++) //Skip the first and last row
		{
			rows[i].cells[0].innerHTML = i;
		}		
		
		sumTotal();
	}

	// Sum Total
	function sumTotal()
	{
		var tab = document.getElementById('atable');
		var sum = 0;
		
		for(var i=1; i < tab.rows.length-1; i++) //Skip the first and last row
		{
			sum += parseFloat(tab.rows[i].cells[4].children[0].value);
		}
		tab.rows[tab.rows.length-1].cells[4].innerHTML = sum;
	}

  
</script>
</head>
 
<body>
<form id="sell">
  Name: <input type="text" id="name">
  <br>
  Quantity: <input type="text" id="quantity">
  <br>
  Price: <input type="text" id="price">
  <br>
  <input type="button" value="Add" onClick="updateSum('sell', 'name', 'quantity', 'price')">
  <br><br>
  <table style="width:750;empty-cells:show;border-collapse:collapse" id="atable">
  <tr>
    <th width="50">No</th>
    <th width="400">Name</th>
    <th width="100">Quantity</th>
    <th width="100">Price</th>
    <th width="100">Total</th>
    <th></th>
  </tr>
<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td style="text-align:right;font-weight:bold">Grand Total&nbsp;</td>
    <td name="allTotal" style="text-align:right;border:1px solid gray">0</td>
    <td></td>
  </tr>
</tbody>  
  </table>
</form>
</body>
</html>

Hope it helps.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

newmaster 0 Newbie Poster · Answer 1 · 2011-09-14T11:12:38+00:00

Thank you AleMonteiro. You help me a lot. I made some changes it is working fine!
I have changed

row[i].txtNo[0].id = txtNo[i];

to

tab.row[i].txtNo[0].id = txtNo[i];

Row number, total and grand total not updating in dynamic table

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers