javascript 动态增加表行-优快云博客

本文介绍了一个使用JavaScript实现的表格计算功能，能够自动计算表格中每行的QTY与PRICE的乘积，并实时更新每行的TOTAL及总计。通过添加和删除表格行来动态管理商品项。

ITEM NO	ITEM DESCRIPTION	QTY	PRICE	INNER	OUTER	TOTAL	REMARKS	操作

合计					0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS计算每行的和与总和（QTY，PRICE，TOTAL，合计）</title> </head> <body> <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> <tr class="tit2"> <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"> <td><input type="text" name="fno" size=12 maxlength=12> </td> <td><input type="text" name="fdesc" size=32> </td> <td><input type="text" name="fqty" size=7 maxlength=7 value='0' onchange='chtotal(this);'> </td> <td><input type="text" name="fprice" size=6 maxlength=6 value='0' onchange='chtotal(this);'> </td> <td><input type="text" name="finners" size=4 maxlength=4> </td> <td><input type="text" name="fouters" size=4 maxlength=4> </td> <td><input type="text" name="ftotal" size=8 readonly value='0'> </td> <td><input type="text" name="fremarks" size=20 maxlength=100> </td> <td><input type="button" value="删除" name='del' onclick="delrecord(this);"> </td> </tr> <tr class="tit3"> <td>合计 </td> <td colspan=4> </td> <td colspan=2 align='right'> <b id="znum">0 </b> </td> <td colspan=2> </td> </tr> <tr class="tit2"> <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td> </tr> </table> <mce:script type="text/javascript"></mce:script> </body> </html>