范例讲解JS计算表格每行的和与总和代码
日期：2014-05-16 浏览次数：20475 次
实例讲解JS计算表格每行的和与总和代码
<!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>IT知道网_ww.itwis.com--javascript计算每行的和与总和（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>
<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' name='fno' size=12 maxlength=12>";
col = row.insertCell(1);
col.innerHTML = " <input type='text' name='fdesc' size=32 maxlength=100>";
col = row.insertCell(2);
col.innerHTML = " <input type='text' name='fqty' size=7 maxlength=7 value='0' onchange='chtotal(this);'>";
col = row.insertCell(3);
col.innerHTML = " <input type='text' name='fprice' size=6 maxlength=6 value='0' onchange='chtotal(this);'>";
col = row.insertCell(4);
col.innerHTML = " <input type='text' name='finners'
<!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>IT知道网_ww.itwis.com--javascript计算每行的和与总和（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>
<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' name='fno' size=12 maxlength=12>";
col = row.insertCell(1);
col.innerHTML = " <input type='text' name='fdesc' size=32 maxlength=100>";
col = row.insertCell(2);
col.innerHTML = " <input type='text' name='fqty' size=7 maxlength=7 value='0' onchange='chtotal(this);'>";
col = row.insertCell(3);
col.innerHTML = " <input type='text' name='fprice' size=6 maxlength=6 value='0' onchange='chtotal(this);'>";
col = row.insertCell(4);
col.innerHTML = " <input type='text' name='finners'
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
