个人中心
gpt4 book ai didi

javascript - JQuery 与 .live 和 .remove 我无法弄清楚这一点

转载 作者：行者123 更新时间：2023-12-02 20:00:06 25 4
gpt4 key购买 nike

这是一个jsfiddle除了我试图弄清楚的功能之外，它正在工作。

我有这段代码，可以在 .qty 字段中的值发生更改时将 .table 添加到表单中。我想弄清楚两件事。

第一是任何时候只能有一条额外线路可用。

第二个方法是当 #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>

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

最佳答案

要限制 .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();
    }); 
});

关于javascript - JQuery 与 .live 和 .remove 我无法弄清楚这一点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8112530/

25 4 0
文章推荐： 使用 regex 的 javascript 正则表达式用多个 - 字符替换字符串
文章推荐： javascript - Node.js:从其他文件调用代码
文章推荐： javascript - Javascript 中的 gluProject 等效项
文章推荐： javascript - jquery移动日期框自定义对齐方式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com