除了我想弄清楚的函数之外，这里有一个jsfiddle。
我的代码.appends .table代表.qty字段中值更改的表单。我想弄清楚两件事。
首先，任何时候都只有一条额外的线可用。
第二种方法是在#extraDiscount有.focusin时删除一行。
var TheOrderLine = ('<table class="orderLine formFont" width="400" hspace="0" vspace="0"><tr><td width="75" valign="top">Name:<input class="ProductName" type="text" size="6"></td><td width="75" valign="top">WholeSale:<input class="WholeSalePrice" type="text" size="6"></td><td width="75" valign="top">QTY:<input class="qty addLine" type="text" size="6"></td><td width="75" valign="top">L/Total:<input class="lineTotal" type="text" size="6"><br></td><td width="100" valign="top"><div id="delButton">DEL</div></td></table>');
$(document).ready(function(e) {
//This adds the Line Totals
});function updateTotal() {
var totalA = 0;
$('.lineTotal').each(function() { totalA += parseFloat($(this).val()) || 0; });
$('#productTotals').val(totalA.toFixed(2));
}
//This is the autocomplete and is working fine
$(function() {
$('.ProductName').val("");
$('.WholeSalePrice').val("");
$(document).ready(function(e) {
$('.ProductName').live({
focusin: function() {
$(this).autocomplete({
source: "PRODUCT.SEARCH.QUERY.php",
minLength: 2,
autoFocus: true,
select: function(event, ui) {
var $tr = $(this).closest('tr');
$tr.find('.ProductName').val(ui.item.ProductName);
$tr.find('.WholeSalePrice').val(ui.item.WholeSalePrice);
}
})
}
});
});
});
// Used a CSS button for the Delete line
$("#orderFormDiv_Lines").delegate("#delButton", "click", function () {
$(this).closest('.orderLine').remove();
updateTotal(); /* this recalculates the total after an item is deleted */
});
// Removes all lines
$("#removeAll").click(function () {
$('.orderLine').remove();
$('#productTotals input[type="text"]').val('');
updateTotal();
});
$(document).ready(function(e) {
$('.qty').live({
change: function() {
/* This add the numbers for lineTotal field */
var qty = $(this).val();
var $tr = $(this).closest('tr');
var WholeSalePrice = $('.WholeSalePrice:eq(0)', $tr).val();
var lineTotal = parseFloat(qty * WholeSalePrice) || 0;
$('.lineTotal:eq(0)', $tr).val(lineTotal.toFixed(2));;
updateTotal();
// this is the line that I need to add the if function on but I can't figure out how to find the extra empty table rows that may exist and also not let
$('#orderFormDiv_Lines').append(TheOrderLine);
// I'm thinking something along this line here but I can't grasp the .live concept for grabbing the empty .orderlines.
/*
if ('.orderLine':empty) && > 1; {
$('.orderLine').remove();
} else {
$('#orderFormDiv_Lines').append(TheOrderLine);
}
*/ }
})
// Added this in case the Delete All button is used.
$('#addLine').click(function(){
$('#orderFormDiv_Lines').append(TheOrderLine);
});
});
<html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div id="orderFormContent">
<div id="orderFormDiv_Lines">
<table class="orderLine formFont" width="400" hspace="0" vspace="0">
<tr>
<td width="75" valign="top">
Name:<input class="ProductName" type="text" size="6"></td>
<td width="75" valign="top">
WholeSale:<input class="WholeSalePrice" type="text" size="6"></td>
<td width="75" valign="top">
QTY:<input class="qty addLine" type="text" size="6"></td>
<td width="75" valign="top">
L/Total:<input class="lineTotal" type="text" size="6"><br></td>
<td width="100" valign="top">
<div id="delButton">DEL</div>
</td>
</table>
</div>
<div id="orderFormDiv_BottomRight"><br>
<table width="100%" border="1">
<tr>
<td>#extraDiscount</td>
<td><input id="extraDiscount" type="text" size="10"></td>
</tr>
<tr>
<td>#totalDiscounts</td>
<td><input id="totalDiscounts" type="text" size="10" disabled></td>
</tr>
<tr>
<td>#productTotals</td>
<td><input id="productTotals" type="text" size="10" disabled></td>
</tr>
</table></div>
<br>
<p class="clear"/>
</div>
<div id="removeAll">Delete All</div><br><br>
<div id="addLine">Add Line</div>
<hr>
<br></div>
</form><hr>
</body>
</html>
任何帮助都会很棒!!!谢谢！
答案 0 :(得分：2)
限制只为.orderLine添加1行，将您的点击功能更改为
$('#addLine').bind('click', function(){
if($('.orderLine').length == 0)
$('#orderFormDiv_Lines').append(TheOrderLine);
});
并在关注折扣时删除该行：
$('#extraDiscount').bind('focus', function(){
$('#orderFormDiv_Lines table').each(function(){
var hasInput = false;
$(this).find('input').each(function(){
if($(this).val() != '')
hasInput = true;
});
if(!hasInput) $(this).remove();
});
});