I want sum of first column of all row and that sum is display into one text box. How to do this

Question

0.00/5 (No votes)

See more:

I has created one dynamic html table. inside that two column is available. first is amount second is description. I want sum of first column of all rows and that sum is display into one Debit Total Text box how to do this I have try using getSum() function but that is not work any one help me

What I have tried:

<SCRIPT language="javascript">
		
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			element1.name="chkbox[]";
			cell1.appendChild(element1);

			var cell2 = row.insertCell(1);
			var element3 = document.createElement("input");
			element3.type = "text";
			element3.name = "amount";
			getSum(tableID);
			cell2.appendChild(element3);

			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "description";
			cell3.appendChild(element2);


		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}
		
		function getSum(tableID) 
		{
			var table = document.getElementById(tableID);
			var sumVal = 0;
			for(var i=1; i < table.rows.length; i++)
				{
					sumVal = sumVal + parseInt(table.rows[i].cells[1].innerHTML);
				}
			document.getElementById("debitT").innerHTML = sumVal;
		}
</script>
<pre lang="HTML">
<pre><br>
				<input type="button" value="Add Row" onclick="addRow('dataTable')" style="background-color:green;"/>
				<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" style="background-color:red;"/>
				<br>
				<table align="right" id="dataTable" border="1" width="350px">
					<tr>
						<th></th>
						<th>Amount</th>
						<th>Description</th>
					</tr>
					<tr>
						<td><input type="checkbox" name="chk"/></td>
						<td><input type="text" name="amount"/></td>
						<td><input type="text" name="description"/></td>
					</tr>
					<pre><tr>
						<td>Debit Total</td>
						<td><input id="debitT" type="text" name="debittotal" onkeyup="sum()"/></td>
					</tr>
					<tr>

Posted 6-Mar-19 2:28am

Rajesh k bhushan

Updated 6-Mar-19 16:31pm

Add a Solution

Comments

Richard MacCutchan 6-Mar-19 10:19am

Please edit your question and explain what you mean by "is not work".

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Accepted Answer · 2019-03-06T16:32:00

There are lots of drama in the code. I'll try to point out as much as possible

1. The posted markup seem a bit off, like missing closing table tag </table>, upper case <SCRIPT>, then <pre> tag in between the markup, etc... I'm assuming that not an issue at your end
2. I would suggest to call the getSum on debitT textbox click, currently the code have onkeyup="sum()". I don't see sum() method anyway in the code
3. If you look at the code closely, the code is appending a textbox into the table cell, therefore, the code can't just go and sum up the value in the cell. below is an example on how to access the textbox value.

JavaScript

let innerCell = table.rows[i].cells[1];
let textBox = innerCell.getElementsByTagName("input")[0];
sumVal = sumVal + parseInt(textBox.value);

4. for textbox, use the .value property instead of .innerHTML
5. pay attention to the loop

Here is an example: CP_row_sum - JSFiddle[^]