Question

Bellow是动态创建字段的代码。它使用j查询动态创建字段...

图片来描述它： - http://i44.tinypic.com/33a3qzn.png

我想根据先前的输入计算总计的输入... 我不想在onclick（）事件的基础上显示结果...

<!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" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="nietsms.css" rel="stylesheet" type="text/css" />

    <title> NIET Store Management System BY SDC </title>
    <script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"></script>



    <script type="text/javascript">
        $(function(){
            var newRowNum = 0;
            $('#addnew').click(function(){
                newRowNum += 1;
                var addRow = $(this).parent().parent();
                var newRow = addRow.clone();
                $('input', addRow).val('');
                $('td:first-child', newRow).html(newRowNum);
                $('input', newRow).each(function(i){
                    var newID = newRowNum + '_' + i;
                    $(this).attr('id',newID).attr('name',newID);
                });
                addRow.before(newRow);
                $('a.remove', newRow).click(function(){
                    $(this).parent().parent().remove();
                    newRowNum -= 1;
                    return false;               
                });
                $('#go').click(function(){
                    var numRows=$('#tabdata tbody tr').length;
                    $('#myHiddenInput').val(numRows);
                });
                return false;
            });
        });
        </script>











</head>

<body id="bo" >






<div id="site">
<div id="header">  
<img src="logo.png" align="left"   />
</div>
<div id="content"> 
<font color="white" style="font-family: serif; font-size: xx-large;">Welcome, Admin</font>
<div style="margin-left: 20px;" id="register"><br /><br /><br />









<br /><br />
<form action="back.php" method="POST"  target="_new">

<fieldset style="width: 1714px;">
<legend style="font-family: fantasy; font-style: !important; color: teal; font-size:30px ;">Add Items</legend><br /><br />

<p>Category :-
<select size="1" name="cat">
    <option value="0">Choose Item Category</option>
    <option value="1">Stationary</option>
    <option value="2">House Keeping</option>
    <option value="3">Electrical Equipments</option>
    <option value="4">Sanitary Items</option>
    <option value="5">Hardware</option>
    <option value="6">Paint</option>
    <option value="7">Other Items</option>
</select></p>
<table id="tabdata" align="left" cellpadding="0" cellspacing="0" border="0">


<thead>
<tr>
<td>S.No.</td>
<td align="center">Date</td>
<td align="center">Bill No.</td>
<td align="center">Name Of Item</td>
<td align="center">Quantity</td>
<td align="center">Rate</td>
<td align="center">Discount</td>
<td align="center">Amount</td>
<td align="center">VAT %</td>
<td align="center">Other Charges</td>
<td align="center">Grand Total</td>
<td align="center">Vendor Name</td>
<td align="center">Vendor Contact No.</td>
</tr>
</thead>




<tbody>
<tr>
<td><a id="addnew" href="">Add</a></td>
<td><input type="text" name="0_0" style="width: 120px;"/></td>
<td><input type="text" name="0_1" style="width: 160px;"/></td>
<td><input type="text" name="0_2" style="width: 280px;"/></td>
<td><input type="text" name="0_3" style="width: 80px;"/></td>
<td><input type="text" name="0_4" style="width: 65px;"/></td>
<td><input type="text" name="0_5" style="width: 105px;"/></td>
<td><input type="text" name="0_6" style="width: 105px;"/></td>
<td><input type="text" name="0_7" style="width: 75px;"/></td>
<td><input type="text" name="0_8" style="width: 135px;"/></td>
<td><input type="text" name="0_9" style="width: 125px;"/></td>
<td><input type="text" name="0_10" style="width: 195px;"/></td>
<td><input type="text" name="0_11" /></td>

</tr>


<tr>
<td>
<input type="hidden" id="myHiddenInput" name="myHiddenInput" value="1"/>
</td>
</tr>


</tbody>



</table>
<tr><td><input id="go" name="go" type="submit" value="Submit And Print Result" /></td></tr>
</fieldset>


















</form>






<br />


</div>
</div>                    
<div id="footer"> 
<p style="float: left; color: white; margin-left: 25%;" > Copyright @2012 SDC NIET(Mayank Sachan And Tushar Kesarwani)  | All Rights Reserved</p>              
</div>
</div>

</body>
</html>

Answer 1

将代码添加到

$('#addnew').click(function(){})

在添加新行之前，选择当前行并计算总数（我会在金额和总字段中添加类）

total = 0;
$('#tabdata td input.amount').each(function() {
  total += parseInt($(this).val());
})

然后在添加后更新

$('#tabdata td input.total').val(total);

如何在前面的字段的基础上填充输入字段来计算它，字段是动态创建的

1 个答案: