JS动态计算合计值

Question

非常感谢这里的高手帮助，合计框里在增加或者删除能实时在合计里计算总计里的数值，谢谢！
<table  name="table1"  width="194"   id="tlist">
  <thead> 
  <tr bgcolor="#C4DDF6"> 
      
    <td  height="22" align="center" width="49%">总计</td>
      
    <td width='51%' align="center">操作</td>
    </tr>
    </thead> 
<tbody   id="tbody"> </tbody> 
  </table> 
    <p> 
      <input   type="button"   class="form1"   value="增加"   onClick="addRow()">
  </p>   
  
<table id ="table2" width="135"  >
  <tr> 
       
      <td colspan="8"> 合计: 
        <input type="text" id="znum" name="text" size="10"/>
        </td>
     </tr>
   </table> <script type="text/javascript">
   var Num=0;
   var Input1="<input type='text' name='ftotal' width='20%'  onkeyup='sum(this);'/>";
   var op=" <input type='button' value='删除' name='del' onclick='delrecord(this);'>"; 
   function addRow()
   {
     var tbody=document.getElementById("tbody");
     var tr=tbody.insertRow();
     var reg=/name='(ftotal)'/gi
     var td=tr.insertCell();
     td.innerHTML=Input1.replace(reg,"name='$1"+Num+"'" ); 
     td=tr.insertCell();
     td.innerHTML=op;
     Num++;
   }
     function sum(e) 
  { 
     var newzum=0; 
     var obj=e.parentNode.parentNode; 
     var id=parseInt(obj.rowIndex)-1; 
     var ftotal=document.getElementsByName("ftotal")[id]; 
     var delbutton=document.getElementsByName("del"); 
     for(var j=0;j <delbutton.length;j++) 
             { 
            newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
           }             var znum= document.getElementById("znum"); 
             znum.value=newzum;
             } 
       function delrecord(obj) 
        { 
                 obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
                var delbutton=document.getElementsByName("del"); 
                var newzum=0; 
                 for(var j=0;j <delbutton.length;j++) 
                     { 
                 newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
                   } 
               znum.value=newzum;                       }
                 </script>

Answer 1

<table  name="table1"  width="194"   id="tlist">
    <thead> 
    <tr bgcolor="#C4DDF6"> 
        
      <td  height="22" align="center" width="49%">总计</td>
        
      <td width='51%' align="center">操作</td>
      </tr>
      </thead> 
  <tbody   id="tbody"> </tbody> 
    </table> 
      <p> 
        <input   type="button"   class="form1"   value="增加"   onClick="addRow()">
    </p>   
    
  <table id ="table2" width="135"  >
    <tr> 
         
        <td colspan="8"> 合计: 
          <input type="text" id="znum" name="text" size="10"/>
          </td>
       </tr>
     </table>
  
   <script type="text/javascript">
     var Num=0;
     var Input1="<input type='text' class='the-fuvk' name='ftotal' width='20%'  onkeyup='sum(this);'/>";
     var op=" <input type='button' value='删除' name='del' onclick='delrecord(this);'>"; 
     function addRow()
     {
       var tbody=document.getElementById("tbody");
       var tr=tbody.insertRow();
       var reg=/name='(ftotal)'/gi
       var td=tr.insertCell();
       td.innerHTML=Input1.replace(reg,"name='$1"+Num+"'" ); 
       td=tr.insertCell();
       td.innerHTML=op;
       Num++;
     }
     
  
    function sum(e) 
    { 
       var newzum=0; 
       var obj=e.parentNode.parentNode; 
       var id=parseInt(obj.rowIndex)-1; 
       var ftotal=document.getElementsByName("ftotal")[id]; 
       var delbutton=document.getElementsByName("del"); 
       for(var j=0;j <delbutton.length;j++) 
               { 
              newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
             } 
  
              var znum= document.getElementById("znum"); 
               znum.value=newzum;
               } 
         function delrecord(obj) 
          { 
                   obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
                  var delbutton=document.getElementsByName("del"); 
                  var newzum=0; 
                   for(var j=0;j <delbutton.length;j++) 
                       { 
                   newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
                     } 
                 znum.value=newzum;
  
                         }
            
                setInterval(() => {
                    let arr = [...document.querySelectorAll(".the-fuvk")]
                    if(arr.length){
                        let numArr = arr.filter(item => item.value != "").map(item => parseInt(item.value,10))
                        if(numArr.length) znum.value = numArr.reduce((a,b) => a + b,0)
                    }
                },100)
                   </script>

Answer 2

非常感谢高手的指点，代码写的也非常给力。可是这段代码是JQuery的吧？我的IE点增加没反应。能不能改JS的，我也不懂JQuery。辛苦！

Answer 3

1楼的代码都是原生js、没用jquery。只不过用了一些ie不支持的es6新语法，你用谷歌浏览器就行了。

Answer 4

<html>
<head>
<meta charset=utf-8>
</head>
<body>
<table  name="table1"  width="194"   id="tlist">
<thead> 
<tr bgcolor="#C4DDF6">  
<td  height="22" align="center" width="49%">总计</td>
<td width='51%' align="center">操作</td>
</tr>
</thead> 
<tbody   id="tbody"> </tbody> 
</table> 
<p> 
  <input   type="button"   class="form1"   value="增加"   onClick="addRow()">
</p>   
<table id ="table2" width="135"  >
<tr>    
<td colspan="8"> 合计: 
<input type="text" id="znum" name="text" size="10"/>
</td>
</tr>
</table>
<script>
$=function(b){return document.getElementById(b)};
var Input1="<input type='text' name='score' width='20%'  onkeyup='sum();'/>";
var op=" <input type='button' value='删除' name='del' onclick='delrecord(this);'>"; 
function addRow(){
var tbody=document.getElementById("tbody");
var tr=tbody.insertRow();
var td=tr.insertCell();
td.innerHTML=Input1; 
td=tr.insertCell();
td.innerHTML=op;
}
function sum() {
    var sum1 = 0;   
    var obj = $('tbody');
    var length = obj.rows.length ;
    var things=[].slice.call(document.querySelectorAll("input[name='score']"));
    things.forEach(function(elm){
        var score=elm.value*1;
        if (score.value!=''){
            sum1+=parseFloat(score); 
        } 
    }); 
    $("znum").value = sum1;  
}
function delrecord(obj){ 
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
sum();
}
</script>
</body>
</html>

Answer 5

咱们的讨论高手真多，我要多过来多多学习。改过的脚本是解决了合计计算，把变量NUM去掉了无法计算表格的行数。我是使用NUM循环动态的保存到数据库里。还需要判断 ftotal值不能为空。
<%
dim num:num=request.Form("num")&""
if num<>"" and isnumeric(num) then  
  num=cint(num)
  dim i
  dim ftotal
  for i=0 to num
  .....
 next
%>
 <form   name="form1"   action=""   method="post" onsubmit="return check(this)">
 <input type="hidden" name="num" />///动态表格的计算代码内容<input   type="button"   class="form1"   value="添加"   onClick="addRow()" name="button">
<input type="submit" value="提交"  onClick="return check1();" name="submit" />
<script>
function check(f)
  {
    for(var i=0;i<Num;i++)
    {      var ftotal=f["ftotal"+i];
      if(ftotal.value==""||isNaN(ftotal.value)||parseFloat(ftotal.value)<=0)
      {
        alert("金额错误");
        ftotal.select();
        return false;
      }
    }
    f.num.value=Num;
  }</script>

Answer 6

非常感谢各位老师的帮助，这个动态合计我改动了一小点。现在加上判断文本框不能是空值，还有一个问题这段代码用HTML运行很正常，ASP下合计就运行不起来不知道什么原因。请指教一下，谢谢！
 <script type="text/javascript">
 $=function(id){return document.getElementById(id)};
   var Num=0;     var Input1="<input type='text' name='score'  id='score' width='100%'  onkeyup='sum();'/>";
   var op=" <input type='button' value='删除' name='del' onclick='delrecord(this);'>"; 
   function addRow()
   {
     var tbody=document.getElementById("tbody");
     var tr=tbody.insertRow();
     var reg=/name='(score)'/gi
     var td=tr.insertCell();
     td.innerHTML=Input1.replace(reg,"name='$1"+Num+"'") ;
     td=tr.insertCell();
     td.innerHTML=op;
/*
    var tbody=document.getElementById("tbody");
    var tr=tbody.insertRow();
     var td=tr.insertCell();
     td.innerHTML=Input1
     td=tr.insertCell();
     td.innerHTML=Input2
     td=tr.insertCell();
    td.innerHTML=Input3; 
    td=tr.insertCell();
    td.innerHTML=op;
*/
     Num++;
   } function check(f)
  {
    for(var i=0;i<Num;i++)
    {
      var score=f["score"+i];
 
      if(score.value==""||isNaN(score.value)||parseFloat(score.value)<=0)
      {
        alert("不能为空！");
        score.select();
        return false;
      }
    }
    f.num.value=Num;
  }function sum() {
    var sum1 = 0;   
    //var obj = $('tbody');
   // var length = obj.rows.length ;
    var things=[].slice.call(document.querySelectorAll("input[id='score']"));
       //alert(things);
          things.forEach(function(elm){
         var score=elm.value*1;
        if (score.value!=''){
          sum1+=parseFloat(score); 
         } 
      }); 
   // $("znum").value = sum1.toFixed(2);  
     $("znum").value = Math.round(sum1* 100) / 100;
}
   function delrecord(obj){ 
    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
    sum();
} </script>