注册 登录
编程论坛 → JavaScript论坛

动态的表格求合计，为什么数值是null？

pht 发布于 2019-04-26 16:10， 2136 次点击
谁帮我看看是那里的问题，这个动态表格怎么数值取不到。高手指点一下。最好给一个实例。以下是代码。

谢谢！

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=gb2312" />
  <title>test</title>
  <style type="text/css">
    body{font-size:12pt}
    td{font-size:11pt}
  </style>
</head>
<body>
<form   name="form1"   action=""   method="post" onsubmit="return check(this)">
<input type="hidden" name="num" />
  <table   width="500px"   border="0"   align="center"   cellpadding="0"   cellspacing="1"   bordercolor="#FFFFFF"   bgcolor="#86c2fe">   
<thead>
  <tr bgcolor="#C4DDF6">         
    <td width="35%"  height="22" align="center">姓名</td>                             
    <td width="35%" align="center">学号</td>
    <td width="20%" align="center" >成绩</td>
    <td width='10%' align="center">操作</td>
  </tr>
</thead>
<tbody   id="tbody">      
</tbody>
</table>
<div align="center"><p><input   type="button"   class="form1"   value="增加学生"   onClick="addRow()"> <input type="submit" value="提交" /></p>
   
  </div>
  <table id ="table2" class="gridtable"  >
    <tr>
      <td colspan="8"> 合计:
        <input type="text" id="total_num" class="underline" value="" name="text">
        &nbsp;&nbsp; </td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
<script type="text/javascript">
  var Num=0;
  var Input1="<input type='text' name='name' width='100%'/>";
  var Input2="<input type='text' name='number' width='100%'/>";
  var Input3="<input type='text' name='score' width='100%'  onkeyup='sum(this);'/>";
  var op="<span style='cursor:hand' onclick='if(confirm(\"确认删除？\"))this.parentNode.parentNode.removeNode(true);'>删除</span>";
  function addRow()
  {
    var tbody=document.getElementById("tbody");
    var tr=tbody.insertRow();
    var reg=/name='(name|number|score)'/gi
    var td=tr.insertCell();
    td.innerHTML=Input1.replace(reg,"name='$1"+Num+"'") ;
    td=tr.insertCell();
    td.innerHTML=Input2.replace(reg,"name='$1"+Num+"'");
    td=tr.insertCell();
    td.innerHTML=Input3.replace(reg,"name='$1"+Num+"'" );
    td=tr.insertCell();

    td.innerHTML=op;
    Num++;
  }
  

function sum(obj) {
            
       var sum1 = 0;   
      
      var obj = document.getElementById("tbody");   //取mybody对象
      var length = obj.rows.length ;   
      var  score=document.getElementById("score"+i);
      alert("当前值=="+document.getElementById("score"+i));
      for(var i=0; i<length; i++ ) {     
          if (score.value!=""){

             sum1 =parseFloat(sum1) + parseFloat(("score"+i).value);
          }
         
      }  
          document.getElementById ("total_num").value = sum1;  

        }

</script>

</body>
</html>
1 回复
#2
leeqihero2019-06-04 17:46
程序代码：
<html>
<head>
<meta charset=utf-8>
<style>
body{font-size:12pt}
td{font-size:11pt}
</style>
</head>
<body>
<form   name="form1"   action=""   method="post" onsubmit="return check(this)">
<input type="hidden" name="num" />
  <table   width="500px"   border="0"   align="center"   cellpadding="0"   cellspacing="1"   bordercolor="#FFFFFF"   bgcolor="#86c2fe">   
<thead>
  <tr bgcolor="#C4DDF6">         
    <td width="35%"  height="22" align="center">姓名</td>                             
    <td width="35%" align="center">学号</td>
    <td width="20%" align="center" >成绩</td>
    <td width='10%' align="center">操作</td>
  </tr>
</thead>
<tbody   id="tbody">      
</tbody>
</table>
<div align="center"><p><input   type="button"   class="form1"   value="增加学生"   onClick="addRow()"> <input type="submit" value="提交" /></p>
   
  </div>
  <table id ="table2" class="gridtable"  >
    <tr>
      <td colspan="8"> 合计:
        <input type="text" id="total_num" class="underline" value="" name="text">
        &nbsp;&nbsp; </td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
<script>
$=function(a){return document.getElementById(a)};
var Num=0;
var Input1="<input type='text' name='name' width='100%'/>";
var Input2="<input type='text' name='number' width='100%'/>";
var Input3="<input type='text' id='' name='score' width='100%'  onblur='sum(this);'/>";
var op="<span style='cursor:hand' onclick='if(confirm(\"确认删除？\"));var hh=this.parentNode.parentNode;hh.parentNode.removeChild(hh);sum(this);'>删除</span>";
function addRow(){
    var tbody=$("tbody");
    var tr=tbody.insertRow();
    var td=tr.insertCell();
    td.innerHTML=Input1;
    td=tr.insertCell();
    td.innerHTML=Input2;
    td=tr.insertCell();
    td.innerHTML=Input3.replace(/''/,Num);
    td=tr.insertCell();
    td.innerHTML=op;
    Num++;
}
  

function sum(god) {
    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(sum1) + parseFloat(score);
        }
    });
    $("total_num").value = sum1;  
}

</script>

</body>
</html>
1
©2025, BC-CN.NET
电脑版