JQuery与.live& 。删除我无法弄清楚这一点

时间:2011-11-13 15:18:32

标签: javascript jquery

除了我想弄清楚的函数之外,这里有一个jsfiddle

我的代码.appends .table代表.qty字段中值更改的表单。我想弄清楚两件事。

首先,任何时候都只有一条额外的线可用。

第二种方法是在#extraDiscount.focusin时删除一行。

这是JQuery。

    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表单....

    <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>

任何帮助都会很棒!!!谢谢!

1 个答案:

答案 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();
    }); 
});