有一选择删除表格，删除其中某行后，其合计却不相应重计或重计不正确

网友可将以下代码运行，然后输入数量，完后再在其某行前的选择框打勾后按删除（delete）键，再看合计，就明白，原合计不变或变化不正确。再请高手帮助确诊一下，问题在哪？代码如下：
<table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
<tr class="tit1" align='center'><td width="0"><input type="checkbox" name="checkall"  onClick="check_all(this)" ></td><td width="138"><input type=  "text" id="fdesc1" name="fdesc1" size=32 value="ITEM NO"> </td> 
<td width="308"><input type="text" name="fdesc1" id="fdesc1" size=32 value="ITEM DESCRIPTION"> </td> 
<td width="62"><input type="text" name="fdesc1" id="fdesc1" size=7 value="QTY"> </td> 
<td width="55"><input type="text" name="fdesc1" id="fdesc1" size=6 value="PRICE"> </td>
<td width="42"><input type="text" name="fdesc1" id="fdesc1" size=4 value="INNER"> </td> 
<td width="42"><input type="text" name="fdesc1" id="fdesc1" size=4 value="OUTER"></td> 
<td width="68"><input type="text" name="fdesc1" id="fdesc1" size=8 value="TOTAL "> </td> 
<td width="210"><input type="text" name="fdesc1" id="fdesc1" size=28 value="REMARKS"> </td>
 
</tr>
</table><table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist"><script language="JavaScript">
function check_all(obj){
for(i=0;i<document.getElementsByName("c").length;i++){
document.getElementsByName("c")[i].checked=obj.checked;
}
}
</script><tr class="tit1" align='center'> 
<td> <input type="checkbox" name="c" /><input type=  "text" id="fno1" name="fno1" size=32 value="001"> </td>
<td> <input type="text" name="fdesc1" id="fdesc1" size=32 value="television"> </td> 
<td> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='250' onchange='chtotal(1);'> </td>
<td> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'> </td>
<td> <input type="text" id="finners1" name="finners1" size=4 maxlength=4> </td>
<td> <input type="text" id="fouters1" name="fouters1" size=4 maxlength=4> </td>  
<td> <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
<td> <input type="text" id="fres1" name="fres1" size=28 maxlength=100> </td>
</tr>
  
<tr class="tit2" align='center'> 
<td> <input type="checkbox" name="c" /><input type=<input type= "text" id="fdesc2" name="fdesc2" size=32 value="002"/> </td>
<td> <input type="text" name="fdesc2" id="fdesc" size=32 value="radio"> </td> 
<td> <input type="text" id="fqty2" name="fqty2" size=7 maxlength=7 value='150' onchange='chtotal(2);'> </td>
<td> <input type="text" id="fprice2" name="fprice2" size=6 maxlength=6 value='0' onchange='chtotal(2);'> </td>
<td> <input type="text" id="finners2" name="finners2" size=4 maxlength=4> </td>
<td> <input type="text" id="fouters2" name="fouters2" size=4 maxlength=4> </td>  
<td> <input type="text" id="ftotal2" name="ftotal2" size=8 readonly > </td>
<td> <input type="text" id="fres2" name="fres2" size=28 maxlength=100> </td>
</tr><tr class="totalsum"><td>Total</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>
  
<script language="javascript"> 
function deleteAll(obj){
var checked = document.getElementsByName(obj);
debugger
for(var i = 0; i < checked.length; i ++){
if(checked[i].checked){
var tr=checked[i].parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr);
i--;
}
}
}
</script><td><input type="button" name="delete_button"  value="Delete" onclick="deleteAll('c');"></td>
</table>
<script type="text/javascript">
   function delrecord(btn) {/////////
        var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex+1;
        var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum");
        
        var btn = document.getElementById('delbutton' + (rowIndex - 1));
        if (btn) btn.disabled = false; //这里将上一个button设置为有效
        tbody.removeChild(tr);
    }
      function chtotal(id) {
       var tt = document.getElementById("totalsum");
       var q = document.getElementById("fqty" + id);
       var p = document.getElementById("fprice" + id);
       var t = document.getElementById("ftotal" + id);
       if (q.value != '' && p.value != '') {
           var old = t.getAttribute('ov');
           if (old) old = parseInt(old); else old = 0;
           t.value = q.value * p.value;
           t.setAttribute('ov', t.value);
           tt.innerHTML = parseInt(tt.innerHTML) + parseInt(t.value) - old;
       }
   }
</script> 

解决方案 »

  1.   

    function deleteAll(obj){
    var checked = document.getElementsByName(obj);
    debugger
    for(var i = 0; i < checked.length; i ++){
    if(checked[i].checked){
    var tr=checked[i].parentNode.parentNode;
    var tbody=tr.parentNode;
    document.getElementById("fprice" + (i+1)).value=0;
    chtotal(i+1);
    tbody.removeChild(tr);
    }
    }
    }
      

  2.   

    我感到xwbb123老师的编程水平非常深厚，两次发贴求助，他都是一点即明，立即补上代码的不足之处，可见他是真正的编程高手，真佩服极了。谢谢。以后学习中遇到难题，继续请教。
      

  3.   

    我对X老师的解答很满意，不过还存在一些难题，那就是input内的字体（也就是value="  ">内的文字与数字）无法居中问题，这可是个难度很高的问题，网上搜索了很久，别人的解答都未作出满意的结论。还有一点是不知如何在input内插入图片代码，并做到当鼠标移到图片的名称上边时图片就显示，移到名称外时图片自动消失。 
      

  4.   

    居中你不是只要input加个样式text-align:center吗
      

  5.   

    没那么简单吧？在input下面加上这些，都不起作用。
      

  6.   


    function deleteAll(obj){
    var checked = document.getElementsByName(obj);
    debugger
    for(var i = 0; i < checked.length+1; i ++){
    if(checked[0].checked){
    var tr=checked[0].parentNode.parentNode;
    var tbody=tr.parentNode;
    document.getElementById("fprice" + (i+1)).value=0;
    chtotal(i+1);
    tbody.removeChild(tr);
    }
    }
    }
      

  7.   

    function deleteAll(obj){
    var checked = document.getElementsByName(obj);
    debugger
    for(var i = 0; i < checked.length+1; i ++){
    if(checked[0].checked){
    var tr=checked[0].parentNode.parentNode;
    var tbody=tr.parentNode;
    document.getElementById("fprice" + (i+1)).value=0;
    chtotal(i+1);
    tbody.removeChild(tr);
    }
    }
    }
      

  8.   

    ·
       下面的代码是一套全选/全删表格代码，奇怪的是，这个表格，如从下方一行一行的打勾删除，最后能全部删除完，但如用全选/选消（Select All / Clear All）方式全选/全删，则只能删最下边的一行，其余删不掉。如从上一行一行地删，那么第二行就删不掉。这第二行（002）的代码没什么异常，却删不掉。大家不妨试试看。不知问题在哪。
    <html>
    <head>
          <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
          <thead>
                <tr>
                    <td width="150"><input type="checkbox" name="checkall"  onClick="check_all(this)" >Select All / Clear All</td>
                    <td width="150">&nbsp ITEM NO</td>
                    <td width="360">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ITEM DESCRIPTION</td>
                    <td width="100">&nbsp &nbsp &nbsp &nbsp QTY</td>
                    <td width="100">&nbsp &nbsp &nbsp &nbsp &nbspPRICE</td>
                    <td width="100">&nbsp &nbsp &nbsp &nbsp TOTAL</td>
                    
                </tr>
            </thead> 
            </table>
    </head>
           <table width="960" border="0" cellspacing="0" cellpadding="0" class="tb" id="tlist">
           <tr>
    <script language="JavaScript">
    function check_all(obj){
    for(i=0;i<document.getElementsByName("c").length;i++){
    document.getElementsByName("c")[i].checked=obj.checked;
    }
    }
    </script>
                    <td align="center width="110">  <input type="checkbox" name="c" /> </td>
                    <td align="center width="100"> <input type=  "text" id="fno1" name="fno1" size=32 value="001"> </td>
                    <td align="center" width="360"><input type=  "text" size=30  value="television">  </td>
                    <td align="center width="130"> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='250' onchange='chtotal(1);'></td>
                    <td align="center width="130"> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'></td>
                     <td align="center width="130">  <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
                </tr>            <tr>
    <script language="JavaScript">
    function check_all(obj){
    for(i=0;i<document.getElementsByName("c").length;i++){
    document.getElementsByName("c")[i].checked=obj.checked;
    }
    }
    </script>
                    <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                    <td align="center width="100"> <input type=  "text" id="fno2" name="fno2" size=32 value="002"> </td>
                    <td align="center" width="360"><input type=  "text"  size=30 value="radio"> </td>
                    <td align="center width="130"> <input type="text" id="fqty2" name="fqty2" size=7 maxlength=7 value='120' onchange='chtotal(2);'></td>
                    <td align="center width="130"> <input type="text" id="fprice2" name="fprice2" size=6 maxlength=6 value='0' onchange='chtotal(2);'></td>
                    <td align="center width="130">  <input type="text" id="ftotal2" name="ftotal2" size=8 readonly > </td>
                    
                </tr>            <tr>
    <script language="JavaScript">
    function check_all(obj){
    for(i=0;i<document.getElementsByName("c").length;i++){
    document.getElementsByName("c")[i].checked=obj.checked;
    }
    }
    </script>
                    <td align="center width="110"> <input type="checkbox" name="c" /> </td>
                    <td align="center width="100"> <input type=  "text" id="fno3" name="fno3" size=32 value="003"> </td>
                    <td align="center" width="360"><input type=  "text"  size=30 value="display"> </td>
                    <td align="center width="130"> <input type="text" id="fqty3" name="fqty3" size=7 maxlength=7 value='400' onchange='chtotal(3);'></td>
                    <td align="center width="130"> <input type="text" id="fprice3" name="fprice3" size=6 maxlength=6 value='0' onchange='chtotal(3);'></td>
                    <td align="center width="130">  <input type="text" id="ftotal3" name="ftotal3" size=8 readonly > </td>
                    
                </tr>
                            
    <script language="javascript"> 
    function deleteAll(obj){
    var checked = document.getElementsByName(obj);
    debugger
    for(var i = 0; i < checked.length; i ++){
    if(checked[i].checked){
    var tr=checked[i].parentNode.parentNode;
    var tbody=tr.parentNode;
    document.getElementById("fprice" + (i+1)).value=0;
    chtotal(i+1);
    tbody.removeChild(tr);
    i--;
    }
    }
    }
    </script><td><input type="button" name="delete_button"  value="Delete" onclick="deleteAll('c');"></td><tr class="totalsum"><td>Total</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr><script type="text/javascript">
       function delrecord(btn) {/////////
            var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex+1;
            var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum");
            
            var btn = document.getElementById('delbutton' + (rowIndex - 1));
            if (btn) btn.disabled = false; //这里将上一个button设置为有效
            tbody.removeChild(tr);
        }
       
       function chtotal(id) {
           var tt = document.getElementById("totalsum");
           var q = document.getElementById("fqty" + id);
           var p = document.getElementById("fprice" + id);
           var t = document.getElementById("ftotal" + id);
           if (q.value != '' && p.value != '') {
               var old = t.getAttribute('ov');
               if (old) old = parseInt(old); else old = 0;
               t.value = q.value * p.value;
               t.setAttribute('ov', t.value);
               tt.innerHTML = parseInt(tt.innerHTML) + parseInt(t.value) - old;
           }
       }
    </script> 
    </tbody>
    </table>
    </html>