Jquery / javascript：无法导出表中列的总和（总计） [英] Jquery/javascript: unable to derive sum (total) of column in table

问题描述

I am unable to get the required result using the jQuery and I seem cannot figure out what went wrong which I request anyone to please look into the problem and advise/suggest the same. I am open to other suggestions as well.

<div class="w3-container w3-padding-4x w3-indigo">
		<h2>
  		Table Testing
		</h2>
	</div>
	
	<div class="w3-container w3-section w3-pale-green">
		<table class="w3-table-all" id="sum_table" width="300" border="1">
			<tr class="titlerow">
				<th>SN</th>
				<th>DESCRIPTION</th>
				<TH>UNIT</TH>
				<TH>REQD QTY</TH>
				<TH>AVAIL. QTY</TH>
				<TH>RATE</TH>
				<TH>AMOUNT</TH>
				<TH>REMARKS IF ANY</TH>
			</tr>

			<tr>
				<td>1</td>
				<td>Steel</td>
				<td>Ton</td>
				<td>200</td>
				<td><input id="a.qty" type="number" oninput="calculate()" /></td>
				<td><input id="rate" type="number" oninput="calculate()" /></td>
				<td class="rowDataSd"><input id="amt1" type="number" name="amount" /></td>
				<td><input type="text" name=""></td>
			</tr>

			<tr>
				<td>2</td>
				<td>Cement</td>
				<td>Bags</td>
				<td>300</td>
				<td><input id="qty2" type="number" oninput="calculate1()" /></td>
				<td><input id="rate2" type="number" oninput="calculate1()" /></td>
				<td class="rowDataSd"><input id="amt2" type="number" name="amount" /></td>
				<td><input type="text" name=""></td>
			</tr>
			<tr class="totalColumn">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td class="totalCol"><input type="button" oninput="Calculate2()" name="Calculate"/> TOTAL:</td>
				<td><input type="text" name=""></td>
			</tr>
			
		</table>

<script>
function calculate(){
				var x1 = document.getElementById('a.qty').value;
				var x2 = document.getElementById('rate').value;
				var x3 = document.getElementById('amt1').value;
				var x4 = x1 * x2;
				amt1.value = x4;
			}

			function calculate1() {
				var y1 = document.getElementById('qty2').value;
				var y2 = document.getElementById('rate2').value;
				var y3 = document.getElementById('amt2').value;
				var y4 = y1 * y2;
				amt2.value = y4;

			}

			    var totals = [0];
                    
				$(document).ready(function() {

  				var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

 				 $dataRows.each(function() {
    			$(this).find('.rowDataSd input').each(function(i) {
     				totals[i] += parseInt($(this).val()) || 0
    				});
  				});
 				$("#sum_table td.totalCol").each(function(i) {
    			$(this).value("total:" + totals[i]);
 				 });

			});
</script>

结果可通过此链接获取，以便您轻松参考 - 图像 - TinyPic - 免费图像托管，照片共享& amp;视频托管 [ ^ ]



我尝试过：



我能够通过使用得到每行的乘法金额列中的javascript函数。

但是，我无法使用jQuery函数导出Amount列的总和，如上所示。

The outcome is available through this link for your easy reference- Image - TinyPic - Free Image Hosting, Photo Sharing & Video Hosting[^]

What I have tried:

I was able to derive the multiplication of each row by using the javascript function in the "Amount" column.
However, I am unable to derive the total sum of "Amount" Column using jQuery function as shown above.

推荐答案

（ document ）。ready（ function （）{

var

(document).ready(function() { var

dataRows =

dataRows =

（ ＃sum_table tr：not（'。totalColumn，.titlerow'））;

这篇关于Jquery / javascript：无法导出表中列的总和（总计）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！