自动更新行的总和&表中的列 [英] Auto update sum of rows & columns in a table

问题描述

此问题已由@enhzflep和@Rob Schmuecker早些时候处理：感谢所有的努力。
我可以得到每一行的总和。但我无法获得每列的总和（在页脚处）。现在我想避免使用事件监听器。我究竟做错了什么？
请注意，我是一名初学者&我的知识仅限于HTML，CSS，现在的JavaScript。我正在逐步取得进展。

 <！DOCTYPE html> 
< html> 
< head> 
< title> Chem help< / title> 
 
< style type =text / css> 
 body {font-family：Arial，Verdana，Helvetica，Sans-serif; padding：1px;} 
 th {font-weight：bold; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 td {font-weight：normal; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 #sn {text-align：right;} 
 .fin {text-align：right;} 
 .fin：focus {background-color：rgb（ 255,255,150）;} 
 .negRed {text-align：right; background-color：rgb（250,200,200）;} 
 .posNorm {text-align：right; background-color：rgb（255,255,255）} 
 .nofoc {font-weight：bold; text-align：right;} 
< / style> 
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js> 
< / script> 
 
< / head> 
< body> 
< table id =pr> 
< tbody> 
< tr id =thd> 
 th / n< / th> 
 th Ddn1< / th> 
 th Ddn2< / th> 
 th Ddn3< / th> 
 th Ddn4< / th> 
< th> Total< / th> 
< / tr> 
 
< tr> 
< td id =sn/> 1< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
< td id =sn/> 2< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
< td id =sn/> 3< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tfoot id =tft> 
< tr> 
< td class =nofoc>总计< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
< / tfoot> 
< / tbody> 
< / table> 
 
< script> 
 function update（element）{
 var a = element.parentElement.parentElement.children [1] .children [0] .value; 
 var c = element.parentElement.parentElement.children [2] .children [0] .value; 
 var e = element.parentElement.parentElement.children [3] .children [0] .value; 
 var g = element.parentElement.parentElement.children [4] .children [0] .value; 
 console.log（a，c，e，g）; 
 
 <！ - 将所有NaN值设为0  - > 
 if（a ===|| isNaN（a））{
 a = 0; 
} 
 if（c ===|| isNaN（c））{
 c = 0; 
} 
 if（e ===|| isNaN（e））{
 e = 0; 
} 
 if（g ===|| isNaN（g））{
 g = 0; 
} 
 
 var b = parseInt（a）; 
 var d = parseInt（c）; 
 var f = parseInt（e）; 
 var h = parseInt（g）; 
 
 <！ -  Alert for -ve input，alphabets ... cell turned red  - > 
 if（b <0）{
 element.parentElement.parentElement.children [1] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [1] .children [0] .setAttribute（class，posNorm）; 
} 
 if（d <0）{
 element.parentElement.parentElement.children [2] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [2] .children [0] .setAttribute（class，posNorm）; 
} 
 if（f <0）{
 element.parentElement.parentElement.children [3] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [3] .children [0] .setAttribute（class，posNorm）; $ h 
 
 if（h <0）{
 element.parentElement.parentElement.children [4] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [4] .children [0] .setAttribute（class，posNorm）; 
} 
 
 var y =（b + d + f + h）; <！ - 总和扣除额 - > 
 
 <！ - 警告NaN值..单元格变成红色 - > 
 if（isNaN（y））{
 y = 0; 
} 
 
 <！ -  Alert for -ve input。总计= 0&细胞变成红色 - > 
 if（b <0 || d <0 || f <0 || h <0）{
 y = 0; 
 element.parentElement.parentElement.children [5] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [5] .children [0] .setAttribute（class，posNorm）; 
} 
 
 element.parentElement.parentElement.children [5] .children [0] .value = y; 
 
 var table = document.getElementById（pr）; 
 var nuRow = document.getElementById（pr）。rows.length; 
 var t = nuRow  -  1; 
 var colSum1，colSum2，colSum3，colSum4，colSum5; 
 var v; 
 var row; （v = 1; v  row = table.rows [t]; 
 
; 
 colSum1 = colSum1 + b; 
 colSum2 = colSum2 + d; 
 colSum3 = colSum3 + f; 
 colSum4 = colSum4 + h; 
 colSum5 = colSum5 + y; 
 
 element.row.children [1] .children [0] .value = colSum1; 
 element.row.children [2] .children [0] .value = colSum2; 
 element.row.children [3] .children [0] .value = colSum3; 
 element.row.children [4] .children [0] .value = colSum4; 
 element.row.children [5] .children [0] .value = colSum5; 
} 
} 
< / script> 
< / body> 
< / html> 
  

解决方案

代码中存在很多问题。

1. 过早关闭< td /> ！


2. 重复使用 id ，这是最糟糕的！
/ code>里面< tbody> ！

3. 最重要的是，你的代码根本不可读！ / li>
   

非工作最终HTML

下面的代码不起作用，但至少没有错误！

 <！DOCTYPE html> 
< html> 
< head> 
< title> Chem help< / title> 
< style type =text / css> 
 body {font-family：Arial，Verdana，Helvetica，Sans-serif; padding：1px;} 
 th {font-weight：bold; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 td {font-weight：normal; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 #sn {text-align：right;} 
 .fin {text-align：right;} 
 .fin：focus {background-color：rgb（ 255,255,150）;} 
 .negRed {text-align：right; background-color：rgb（250,200,200）;} 
 .posNorm {text-align：right; background-color：rgb（255,255,255）} 
 .nofoc {font-weight：bold; text-align：right;} 
< / style> 
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js> 
< / script> 
 
< / head> 
< body> 
< table id =pr> 
< tbody> 
< tr id =thd> 
 th / n< / th> 
 th Ddn1< / th> 
 th Ddn2< / th> 
 th Ddn3< / th> 
 th Ddn4< / th> 
< th> Total< / th> 
< / tr> 
 
< tr> 
< td> 1< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
< td> 2< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
< td> 3< / td> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =finonkeyup =update（（this））; />< / TD> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
< / tbody> 
 
< tfoot id =tft> 
< tr> 
< td class =nofoc>总计< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
< / tfoot> 
< / table> 
 
< script> 
 function update（element）{
 var a = element.parentElement.parentElement.children [1] .children [0] .value; 
 var c = element.parentElement.parentElement.children [2] .children [0] .value; 
 var e = element.parentElement.parentElement.children [3] .children [0] .value; 
 var g = element.parentElement.parentElement.children [4] .children [0] .value; 
 console.log（a，c，e，g）; 
 
 <！ - 将所有NaN值设为0  - > 
 if（a ===|| isNaN（a））{
 a = 0; 
} 
 if（c ===|| isNaN（c））{
 c = 0; 
} 
 if（e ===|| isNaN（e））{
 e = 0; 
} 
 if（g ===|| isNaN（g））{
 g = 0; 
} 
 
 var b = parseInt（a）; 
 var d = parseInt（c）; 
 var f = parseInt（e）; 
 var h = parseInt（g）; 
 
 <！ -  Alert for -ve input，alphabets ... cell turned red  - > 
 if（b <0）{
 element.parentElement.parentElement.children [1] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [1] .children [0] .setAttribute（class，posNorm）; 
} 
 if（d <0）{
 element.parentElement.parentElement.children [2] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [2] .children [0] .setAttribute（class，posNorm）; 
} 
 if（f <0）{
 element.parentElement.parentElement.children [3] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [3] .children [0] .setAttribute（class，posNorm）; $ h 
 
 if（h <0）{
 element.parentElement.parentElement.children [4] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [4] .children [0] .setAttribute（class，posNorm）; 
} 
 
 var y =（b + d + f + h）; <！ - 总和扣除额 - > 
 
 <！ - 警告NaN值..单元格变成红色 - > 
 if（isNaN（y））{
 y = 0; 
} 
 
 <！ -  Alert for -ve input。总计= 0&细胞变成红色 - > 
 if（b <0 || d <0 || f <0 || h <0）{
 y = 0; 
 element.parentElement.parentElement.children [5] .children [0] .setAttribute（class，negRed）; 
} else {element.parentElement.parentElement.children [5] .children [0] .setAttribute（class，posNorm）; 
} 
 
 element.parentElement.parentElement.children [5] .children [0] .value = y; 
 
 var table = document.getElementById（pr）; 
 var nuRow = document.getElementById（pr）。rows.length; 
 var t = nuRow  -  1; 
 var colSum1，colSum2，colSum3，colSum4，colSum5; 
 var v; 
 var row; （v = 1; v  row = table.rows [t]; 
 
; 
 colSum1 = colSum1 + b; 
 colSum2 = colSum2 + d; 
 colSum3 = colSum3 + f; 
 colSum4 = colSum4 + h; 
 colSum5 = colSum5 + y; 
 
 element.row.children [1] .children [0] .value = colSum1; 
 element.row.children [2] .children [0] .value = colSum2; 
 element.row.children [3] .children [0] .value = colSum3; 
 element.row.children [4] .children [0] .value = colSum4; 
 element.row.children [5] .children [0] .value = colSum5; 
} 
} 
< / script> 
< / body> 
< / html> 
  

除了上述所有内容，您可以简单地使用jQuery来完成您的工作。您的列和行列表已经修复！刚发现你甚至没有理由包含jQuery！

最终输出：

 <！DOCTYPE html> 
< html> 
< head> 
< title> Chem help< / title> 
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js> 
< / script> 
 
< style type =text / css> 
 * {font-family：Segoe UI;} 
 th {font-weight：bold; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 td {font-weight：normal; text-align：left; font-size：14px; border：1px; 
 border-style：solid; margin：0px; border-colapse：colapse;} 
 #sn {text-align：right;} 
 .fin {text-align：right;} 
 .fin：focus {background-color：rgb（ 255,255,150）;} 
 .negRed {text-align：right; background-color：rgb（250,200,200）;} 
 .posNorm {text-align：right; background-color：rgb（255,255,255）} 
 .nofoc {font-weight：bold; text-align：right;} 
< / style> 
 
< / head> 
< body> 
< table id =pr> 
< tbody> 
< tr id =thd> 
 th / n< / th> 
 th Ddn1< / th> 
 th Ddn2< / th> 
 th Ddn3< / th> 
 th Ddn4< / th> 
< th> Total< / th> 
< / tr> 
 
< tr> 
 1< th> 
< td>< input type =textclass =fin1/>< / td> 
< td>< input type =textclass =fin2/>< / td> 
< td>< input type =textclass =fin3/>< / td> 
< td>< input type =textclass =fin4/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
 th 2< th> 
< td>< input type =textclass =fin1/>< / td> 
< td>< input type =textclass =fin2/>< / td> 
< td>< input type =textclass =fin3/>< / td> 
< td>< input type =textclass =fin4/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
 
< tr> 
 3rd< th> 
< td>< input type =textclass =fin1/>< / td> 
< td>< input type =textclass =fin2/>< / td> 
< td>< input type =textclass =fin3/>< / td> 
< td>< input type =textclass =fin4/>< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
< / tbody> 
< tfoot id =tft> 
< tr> 
< th> Total< / th> 
< td>< input type =textclass =nofoc fin1readonly />< / td> 
< td>< input type =textclass =nofoc fin2readonly />< / td> 
< td>< input type =textclass =nofoc fin3readonly />< / td> 
< td>< input type =textclass =nofoc fin4readonly />< / td> 
< td>< input type =textclass =nofoc只读/>< / td> 
< / tr> 
< / tfoot> 
< / table> 
 
< script> 
 $（function（）{
 $（input）。keyup（function（）{
 col = [0，0，0，0，0]; 
 $ （.fin1）。each（function（）{
 console.log（（$（this）.val（）））; 
 if（！isNaN（$（this）.val（） ）&& $（this）.val（）！=）
 col [0] + = parseInt（$（this）.val（））; 
}）; 
 $（。fin2）。each（function（）{
 if（！isNaN（$（this）.val（））&& $（this）.val（）！=） 
 col [1] + = parseInt（$（this）.val（））; 
}）; 
 $（。fin3）。each（function（）{
（if（！isNaN（$（this）.val（））&& $（this）.val（）！=）
 col [2] + = parseInt（$（this）.val （））; 
））; 
 $（。fin4）。each（function（）{
 if（！isNaN（$（this）.val（））&& amp ; $（this）.val（）！=）
 col [3] + = parseInt（$（this）.val（））; 
}）; 
 col [4 ] = parseInt（col [0]）+ parseInt（col [1]）+ parseInt（c ol [2]）+ parseInt（col [3]）; 
 i = 0; 
 $（tfoot tr input）。each（function（）{
 $（this）.val（col [i ++]）; 
}）; （$！$ b $（tr）。each（function（）{
 $（this）.find（。nofoc）。val（
（（！isNaN（$（this））。 find（。fin1）.val（）））？parseInt（$（this）.find（.fin1）.val（））：0）+ 
（（！isNaN（$（this） .find（。fin2）.val（）））？parseInt（$（this）.find（.fin2）.val（））：0）+ 
（（！isNaN（$（this ）.find（。fin3）.val（）））？parseInt（$（this）.find（。fin3）.val（））：0）+ 
（（！isNaN（$这个）.find（。fin4）.val（）））？parseInt（$（this）.find（.fin4）.val（））：0）
）; 
} ）; 
}）; 
}）; 
< / script> 
 
< / body> 
< / html> 
  

This issue has been dealt with earlier by @enhzflep and @Rob Schmuecker: Thanks for all the effort. I am able to get the sum of each row. But I cannot get the sum of each column (at the footer). For now I want to avoid using event listener. What am I doing wrong? Note that I am a beginner & my knowledge is limited to HTML, CSS, javascript for now. I am progressing gradually.

<!DOCTYPE html>
<html>
<head>
<title>Chem help</title>

<style type="text/css">
body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;}
th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse;}
td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse;}
#sn {text-align: right;}
.fin {text-align: right;}
.fin:focus {background-color: rgb(255,255,150);}
.negRed {text-align: right; background-color: rgb(250,200,200);}
.posNorm {text-align: right; background-color: rgb(255,255,255)}
.nofoc {font-weight: bold; text-align: right;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

</head>
<body>
<table id="pr">
<tbody>
<tr id="thd">
<th>s/n</th>
<th>Ddn1</th>
<th>Ddn2</th>
<th>Ddn3</th>
<th>Ddn4</th>
<th>Total</th>
</tr>

<tr>
<td id="sn" />1</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tr>
<td id="sn" />2</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tr>
<td id="sn" />3</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tfoot id="tft">
<tr>
<td class="nofoc">Total</td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>
</tfoot>
</tbody>
</table>

<script>
function update(element) {
var a = element.parentElement.parentElement.children[1].children[0].value;
var c = element.parentElement.parentElement.children[2].children[0].value;
var e = element.parentElement.parentElement.children[3].children[0].value;
var g = element.parentElement.parentElement.children[4].children[0].value;
console.log(a, c, e, g);

<!-- Set all NaN value to 0 -->
if (a === "" || isNaN(a)) {
    a = 0;
}
if (c === "" || isNaN(c)) {
    c = 0;
}
if (e === "" || isNaN(e)) {
    e = 0;
}
if (g === "" || isNaN(g)) {
    g = 0;
}

    var b = parseInt(a);
    var d = parseInt(c);
    var f = parseInt(e);
    var h = parseInt(g);

    <!-- Alert for -ve input, alphabets... cell turns red -->
    if (b < 0) {
    element.parentElement.parentElement.children[1].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[1].children[0].setAttribute("class", "posNorm");
    }
    if (d < 0) {
    element.parentElement.parentElement.children[2].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[2].children[0].setAttribute("class", "posNorm");
    }
    if (f < 0) {
    element.parentElement.parentElement.children[3].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[3].children[0].setAttribute("class", "posNorm");
    }
    if (h < 0) {
    element.parentElement.parentElement.children[4].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[4].children[0].setAttribute("class", "posNorm");
    }

    var y = (b + d + f + h);    <!-- Sum deductions -->

    <!-- Alert for NaN value.. cell turns red -->
    if (isNaN(y)) {
        y = 0;
    }

    <!-- Alert for -ve input. Total = 0 & cell turns red -->
    if (b < 0 || d < 0 || f < 0 || h < 0) {
    y = 0;
    element.parentElement.parentElement.children[5].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[5].children[0].setAttribute("class", "posNorm");
    }

    element.parentElement.parentElement.children[5].children[0].value = y;

    var table = document.getElementById("pr"); 
    var nuRow = document.getElementById("pr").rows.length;
    var t = nuRow - 1;
    var colSum1, colSum2, colSum3, colSum4, colSum5;
    var v;
    var row;

        for(v = 1; v < t; v++){
            row = table.rows[t];
          colSum1 = colSum1 + b;
          colSum2 = colSum2 + d;
          colSum3 = colSum3 + f;
          colSum4 = colSum4 + h;
          colSum5 = colSum5 + y;

element.row.children[1].children[0].value = colSum1;
element.row.children[2].children[0].value = colSum2;
element.row.children[3].children[0].value = colSum3;
element.row.children[4].children[0].value = colSum4;
element.row.children[5].children[0].value = colSum5;
    }
}
</script>
</body>
</html>

解决方案

There are a lot issues in your code.

1. Premature closing of <td />!
2. Reusing the same id, which is the worst!
3. Putting <tfoot> inside <tbody>!
4. Finally, most important, your code is not readable at all!

Non-Working Final HTML

The below code is not working, but at least free from errors!

<!DOCTYPE html>
<html>
  <head>
    <title>Chem help</title>
    <style type="text/css">
      body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;}
      th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      #sn {text-align: right;}
      .fin {text-align: right;}
      .fin:focus {background-color: rgb(255,255,150);}
      .negRed {text-align: right; background-color: rgb(250,200,200);}
      .posNorm {text-align: right; background-color: rgb(255,255,255)}
      .nofoc {font-weight: bold; text-align: right;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

  </head>
  <body>
    <table id="pr">
      <tbody>
        <tr id="thd">
          <th>s/n</th>
          <th>Ddn1</th>
          <th>Ddn2</th>
          <th>Ddn3</th>
          <th>Ddn4</th>
          <th>Total</th>
        </tr>

        <tr>
          <td>1</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <td>2</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <td>3</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tbody>

      <tfoot id="tft">
        <tr>
          <td class="nofoc">Total</td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tfoot>
    </table>

    <script>
      function update(element) {
        var a = element.parentElement.parentElement.children[1].children[0].value;
        var c = element.parentElement.parentElement.children[2].children[0].value;
        var e = element.parentElement.parentElement.children[3].children[0].value;
        var g = element.parentElement.parentElement.children[4].children[0].value;
        console.log(a, c, e, g);

        <!-- Set all NaN value to 0 -->
          if (a === "" || isNaN(a)) {
            a = 0;
          }
        if (c === "" || isNaN(c)) {
          c = 0;
        }
        if (e === "" || isNaN(e)) {
          e = 0;
        }
        if (g === "" || isNaN(g)) {
          g = 0;
        }

        var b = parseInt(a);
        var d = parseInt(c);
        var f = parseInt(e);
        var h = parseInt(g);

        <!-- Alert for -ve input, alphabets... cell turns red -->
          if (b < 0) {
            element.parentElement.parentElement.children[1].children[0].setAttribute("class", "negRed");
          } else {element.parentElement.parentElement.children[1].children[0].setAttribute("class", "posNorm");
                 }
        if (d < 0) {
          element.parentElement.parentElement.children[2].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[2].children[0].setAttribute("class", "posNorm");
               }
        if (f < 0) {
          element.parentElement.parentElement.children[3].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[3].children[0].setAttribute("class", "posNorm");
               }
        if (h < 0) {
          element.parentElement.parentElement.children[4].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[4].children[0].setAttribute("class", "posNorm");
               }

        var y = (b + d + f + h);    <!-- Sum deductions -->

          <!-- Alert for NaN value.. cell turns red -->
            if (isNaN(y)) {
              y = 0;
            }

        <!-- Alert for -ve input. Total = 0 & cell turns red -->
          if (b < 0 || d < 0 || f < 0 || h < 0) {
            y = 0;
            element.parentElement.parentElement.children[5].children[0].setAttribute("class", "negRed");
          } else {element.parentElement.parentElement.children[5].children[0].setAttribute("class", "posNorm");
                 }

        element.parentElement.parentElement.children[5].children[0].value = y;

        var table = document.getElementById("pr"); 
        var nuRow = document.getElementById("pr").rows.length;
        var t = nuRow - 1;
        var colSum1, colSum2, colSum3, colSum4, colSum5;
        var v;
        var row;

        for(v = 1; v < t; v++){
          row = table.rows[t];
          colSum1 = colSum1 + b;
          colSum2 = colSum2 + d;
          colSum3 = colSum3 + f;
          colSum4 = colSum4 + h;
          colSum5 = colSum5 + y;

          element.row.children[1].children[0].value = colSum1;
          element.row.children[2].children[0].value = colSum2;
          element.row.children[3].children[0].value = colSum3;
          element.row.children[4].children[0].value = colSum4;
          element.row.children[5].children[0].value = colSum5;
        }
      }
    </script>
  </body>
</html>

Instead of all these things above, you can simply use jQuery to do your work. Already, your list of columns and rows are fixed! Just found out that you even have included jQuery for no reason!

Final Output:

<!DOCTYPE html>
<html>
  <head>
    <title>Chem help</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <style type="text/css">
      * {font-family: Segoe UI;}
      th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      #sn {text-align: right;}
      .fin {text-align: right;}
      .fin:focus {background-color: rgb(255,255,150);}
      .negRed {text-align: right; background-color: rgb(250,200,200);}
      .posNorm {text-align: right; background-color: rgb(255,255,255)}
      .nofoc {font-weight: bold; text-align: right;}
    </style>

  </head>
  <body>
    <table id="pr">
      <tbody>
        <tr id="thd">
          <th>s/n</th>
          <th>Ddn1</th>
          <th>Ddn2</th>
          <th>Ddn3</th>
          <th>Ddn4</th>
          <th>Total</th>
        </tr>

        <tr>
          <th>1</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <th>2</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <th>3</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tbody>
      <tfoot id="tft">
        <tr>
          <th>Total</th>
          <td><input type="text" class="nofoc fin1" readonly /></td>
          <td><input type="text" class="nofoc fin2" readonly /></td>
          <td><input type="text" class="nofoc fin3" readonly /></td>
          <td><input type="text" class="nofoc fin4" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tfoot>
    </table>

    <script>
      $(function () {
        $("input").keyup(function () {
          col = [0, 0, 0, 0, 0];
          $(".fin1").each(function () {
            console.log(($(this).val()));
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[0] += parseInt($(this).val());
          });
          $(".fin2").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[1] += parseInt($(this).val());
          });
          $(".fin3").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[2] += parseInt($(this).val());
          });
          $(".fin4").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[3] += parseInt($(this).val());
          });
          col[4] = parseInt(col[0]) + parseInt(col[1]) + parseInt(col[2]) + parseInt(col[3]);
          i = 0;
          $("tfoot tr input").each(function () {
            $(this).val(col[i++]);
          });
          $("tr").each(function () {
            $(this).find(".nofoc").val(
              ((!isNaN($(this).find(".fin1").val())) ? parseInt($(this).find(".fin1").val()) : 0) +
              ((!isNaN($(this).find(".fin2").val())) ? parseInt($(this).find(".fin2").val()) : 0) +
              ((!isNaN($(this).find(".fin3").val())) ? parseInt($(this).find(".fin3").val()) : 0) +
              ((!isNaN($(this).find(".fin4").val())) ? parseInt($(this).find(".fin4").val()) : 0)
            );
          });
        });
      });
    </script>

  </body>
</html>

这篇关于自动更新行的总和&表中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！