08年发的题为“高分求救对动态表格的计算问题”的贴子所示代码存在缺陷

Question

本帖最后由 epoecq 于 2012-10-30 09:46:30 编辑

Answer 1

原贴作者：shagoo
贴子内容：改了一下，这下完整了：  <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
  <tr class="tit2" align='center'>
  <td>ITEM NO </td> <td>ITEM DESCRIPTION </td> <td>QTY </td> <td>PRICE </td> <td>INNER </td> <td>OUTER </td> <td>TOTAL </td> <td>REMARKS </td> <td>操作 </td>
  </tr>
  <tr class="tit3" align='center'>
  <td> <input type="text" id="fno1" name="fno1" size=12 maxlength=12> </td>
  <td> <input type="text" id="fdesc1" name="fdesc1" size=32> </td>
  <td> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='0' 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=20 maxlength=100> </td>
  <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"> </td>
  </tr>
  <tr class="tit3"><td>合计</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>
  <tr class="tit2">
  <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td>
  </tr>  <script>
function AddRecord()  
{  
  var row = tlist.insertRow(tlist.rows.length-2);
  row.className='tit3';
  var i = row.rowIndex;  
  var col = row.insertCell(0);   
  col.innerHTML = " <input type='text' id='fno"+i+"' name='fno"+i+"' size=12 maxlength=12>";   
  col = row.insertCell(1);   
  col.innerHTML = " <input type='text' id='fdesc"+i+"' name='fdesc"+i+"' size=32 maxlength=100>";   
  col = row.insertCell(2);   
  col.innerHTML = " <input type='text' id='fqty"+i+"' name='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal("+i+");'>";   
  col = row.insertCell(3);   
  col.innerHTML = " <input type='text' id='fprice"+i+"' name='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal("+i+");'>";   
  col = row.insertCell(4);   
  col.innerHTML = " <input type='text' id='finners"+i+"' name='finners"+i+"' size=4 maxlength=4>";   
  col = row.insertCell(5);   
  col.innerHTML = " <input type='text' id='fouters"+i+"' name='fouters"+i+"' size=4 maxlength=4>";   
  col = row.insertCell(6);   
  col.innerHTML = " <input type='text' id='ftotal"+i+"' name='ftotal"+i+"' size=8 readonly >";   
  col = row.insertCell(7);   
  col.innerHTML = " <input type='text' id='fres"+i+"' name='fres"+i+"' size=20 maxlength=100>";
  col = row.insertCell(8);   
  col.innerHTML = " <input type='button' value='删除' id='delbutton"+i+"' onclick='delrecord(this);'>";  
  document.getElementById('delbutton'+(i-1)).disabled=true; //这里将上一个button设置为无效
}
function chtotal(id)
{
var q = document.getElementById("fqty"+id);
var p = document.getElementById("fprice"+id);
var t = document.getElementById("ftotal"+id);
var tt = document.getElementById("totalsum");
t.value = q.value * p.value;
tt.innerHTML = parseInt(parseInt(tt.innerHTML) + parseInt(t.value));
}
</script> 把代码插入网页后发现其“删除”按钮无效，也没有插入或删除功能。

Answer 2

  <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
  <tr class="tit2" align='center'>
  <td>ITEM NO </td> <td>ITEM DESCRIPTION </td> <td>QTY </td> <td>PRICE </td> <td>INNER </td> <td>OUTER </td> <td>TOTAL </td> <td>REMARKS </td> <td>操作 </td>
  </tr>
  <tr class="tit3" align='center'>
  <td> <input type="text" id="fno1" name="fno1" size=12 maxlength=12> </td>
  <td> <input type="text" id="fdesc1" name="fdesc1" size=32> </td>
  <td> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='0' 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=20 maxlength=100> </td>
  <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"> </td>
  </tr>
  <tr class="tit3"><td>合计</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>
  <tr class="tit2">
  <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td>
  </tr>  
  </table>
<script type="text/javascript">
    function delrecord(btn) {/////////
        var tr = btn.parentNode.parentNode, tbody = tr.parentNode, rowIndex = tr.rowIndex;
        var t = document.getElementById("ftotal" + rowIndex), tt = document.getElementById("totalsum");
        if (t.value != '') tt.innerHTML = parseInt(tt.innerHTML) - parseInt(t.value);
        var btn = document.getElementById('delbutton' + (rowIndex - 1));
        if (btn) btn.disabled = false; //这里将上一个button设置为有效
        tbody.removeChild(tr);
    }
   function AddRecord() {
       var tlist = document.getElementById('tlist');
       var row = tlist.insertRow(tlist.rows.length - 2);
       row.className = 'tit3';
       var i = row.rowIndex;
       var col = row.insertCell(0);
       col.innerHTML = " <input type='text' id='fno" + i + "' name='fno" + i + "' size=12 maxlength=12>";
       col = row.insertCell(1);
       col.innerHTML = " <input type='text' id='fdesc" + i + "' name='fdesc" + i + "' size=32 maxlength=100>";
       col = row.insertCell(2);
       col.innerHTML = " <input type='text' id='fqty" + i + "' name='fqty" + i + "' size=7 maxlength=7 value='0' onchange='chtotal(" + i + ");'>";
       col = row.insertCell(3);
       col.innerHTML = " <input type='text' id='fprice" + i + "' name='fprice" + i + "' size=6 maxlength=6 value='0' onchange='chtotal(" + i + ");'>";
       col = row.insertCell(4);
       col.innerHTML = " <input type='text' id='finners" + i + "' name='finners" + i + "' size=4 maxlength=4>";
       col = row.insertCell(5);
       col.innerHTML = " <input type='text' id='fouters" + i + "' name='fouters" + i + "' size=4 maxlength=4>";
       col = row.insertCell(6);
       col.innerHTML = " <input type='text' id='ftotal" + i + "' name='ftotal" + i + "' size=8 readonly >";
       col = row.insertCell(7);
       col.innerHTML = " <input type='text' id='fres" + i + "' name='fres" + i + "' size=20 maxlength=100>";
       col = row.insertCell(8);
       col.innerHTML = " <input type='button' value='删除' id='delbutton" + i + "' onclick='delrecord(this);'>";
       var btn = document.getElementById('delbutton' + (i - 1));
       if(btn)btn.disabled = true; //这里将上一个button设置为无效
   }
   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> 

Answer 3

谢谢，您真是个高手。如有时间，请您在其编号（ITEM NO）内增加一下下拉菜单功能，以便选择存入的编号后其行内各项按此编号属性自动填入相应内容。能做到吗？