自动将两个值相乘以得到总jquery

时间:2015-04-26 20:31:22

标签: javascript jquery html

我有一个jQuery问题,想知道是否有人可以帮助我。 我有一个html表,里面有专门针对石头的信息。我有一个每克拉的价格和每桌石头的价格。我希望每克拉的价格乘以重量来得出每块石头的价格。我还有一个我创建的标记框,用户输入一个数字,然后将其视为%,并自动添加到每克拉的价格和每块石头的价格。这是我到目前为止所做的:

这是jquery

jQuery(document).ready(function () {

    jQuery("#markup").keyup(multInputs);

    function multInputs() {
        var $inmult = jQuery(this).val();


        jQuery("tr").each(function () {
            var $val1 = jQuery('.price .amount', this).text().substring(1);

            var $mult = $inmult / 100;
            $mult += 1;
            var $total = $val1 * $mult;



            jQuery('.adjprice .amount', this).text("$" + $total.toFixed(2));



             $val1 = jQuery('.org_ct', this).text();

             $mult = $inmult / 100;
             $mult += 1;
             $total = $val1 * $mult;



            jQuery('.adj_ct', this).text($total.toFixed(2));

        });


    }
}); 

这是HTML

<span class="markup">Adjust Price: <input name="markup" id="markup"> % </span>

<table id="myTable" class="tablesorter-blackice">
    <thead>
        <tr>
            <th>Sku#</th>
            <th>Availability</th>
            <th>Cert #</th>
            <th>Shape</th>
            <th>Weight</th>
            <th>Colour</th>
            <th>Clarity</th>
            <th>Cut</th>
            <th>[MM]</th>
            <th style="display:none" class="header">US$/ct</th>
            <th class="header">US$/ct</th>
            <!--<th>CDN$/ct</th>-->
            <th style="display:none" class="header">Hidden Orig Price</th>
            <th class="header">US$/St</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>rerew</td>
            <td>erewr</td>
            <td>wrer</td>
            <td>ewrer</td>
            <td>erwer</td>
            <td>ere</td>
            <td>ewr</td>
            <td>ewrew</td>
            <td>wreew</td>



            <td class="org_ct" style="display:none">
                <td class="adj_ct">1234</td>
            </td>



            <td class="price" style="display:none">
                <td class="adjprice">
<span class="amount"></span>

                </td>
            </td>
        </tr>
    </tbody>
</table>

这个数字不会自动乘以给我每块石头的价格。标记也不起作用我也非常感谢你的帮助。谢谢!

2 个答案:

答案 0 :(得分:0)

首先,您不正确地调用multInputs函数。在调用函数(或其他方法)时不要忘记()。

jQuery("#markup").keyup(multInputs); 

应该是

jQuery("#markup").keyup(multInputs());

从那里开始,你还有其他一些错误(首先):

  • var $ inmult = $(this).val();,你在函数中调用它,但实际上没有&#34;这个&#34;被提及。如果你在&#34;每个&#34;功能,然后你就会有一个&#34;这个&#34;引用。
  • 当然,请确保您已链接到JQuery! :)
  • 我还会在重量上添加一个类,以便于参考
  • 我不会调试整个事情,但这应该给你一个开始

    $(document).ready(function () {
    
     $("#markup").keyup(multInputs());
    
    function multInputs() {
    
        $("tr").each(function () {
               var $inmult = $(this).find('td.weight' ).text();
    
               var $val1 = $('.price .amount', this).text().substring(1);
    
               var $mult = $inmult / 100;
               $mult += 1;
               var $total = $val1 * $mult;
    
               $('.adjprice .amount', this).text("$" + $total.toFixed(2));
    
               $val1 = $('.org_ct', this).text();
    
               $mult = $inmult / 100;
               $mult += 1;
               $total = $val1 * $mult;
    
               $('.adj_ct', this).text($total.toFixed(2));
    
           });
       }
     });
    

答案 1 :(得分:0)

如果我理解你的问题,这应该做你需要的。请注意,我取消隐藏了一些列以使其更易于使用,您需要再次隐藏它们。

jQuery(document).ready(function () {
    function iDoMathsGood() {
        $('.amount').map(function () {
            // get all of the elements we'll need to manipulate
            var row = $(this).parent().parent();
            var originalTtl = row.find('.price');
            var adjusted = row.find('.adj_ct');

            // get the numbers we'll need and do some math        
            var cts = Number(row.find('.weight').html());
            var origPPCT = Number(row.find('.org_ct').html()) * 1000;
            var markupPrct = Number($('#markup').val()) / 100;
            var markedupCost = (origPPCT * markupPrct) + origPPCT;

            // do a little more math them set the results
            adjusted.html((markedupCost / 1000).toFixed(2));
            originalTtl.html(((origPPCT * cts) / 1000).toFixed(2));
            return $(this).html(((markedupCost * cts) / 1000).toFixed(2));
        });
    }
    iDoMathsGood();
    $('#markup').keyup(function(){
        iDoMathsGood();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="markup">Adjust Price: <input name="markup" id="markup" value="10"/> % </span>

<table id="myTable" class="tablesorter-blackice" border="1">
    <thead>
        <tr>
            <th>Sku#</th>
            <th>Availability</th>
            <th>Cert #</th>
            <th>Shape</th>
            <th>Weight</th>
            <th>Colour</th>
            <th>Clarity</th>
            <th>Cut</th>
            <th>[MM]</th>
            <th class="header">US$/ct</th>
            <th class="header">US$/ct</th>
            <th class="header">Hidden Orig Price</th>
            <th class="header">US$/St</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>rerew</td>
            <td>erewr</td>
            <td>ewrer</td>
            <td>erwer</td>
            <td class="weight">12</td>
            <td>ewr</td>
            <td>ewr</td>
            <td>ewrew</td>
            <td>wreew</td>
            <td class="org_ct">42.50</td>
            <td class="adj_ct"></td>
            <td class="price"></td>
            <td class="adjprice"> <span class="amount"></span> 
            </td>
        </tr>
        <tr>
            <td>rerew</td>
            <td>erewr</td>
            <td>ewrer</td>
            <td>erwer</td>
            <td class="weight">6</td>
            <td>ewr</td>
            <td>ewr</td>
            <td>ewrew</td>
            <td>wreew</td>
            <td class="org_ct">32.75</td>
            <td class="adj_ct"></td>
            <td class="price"></td>
            <td class="adjprice"> <span class="amount"></span> 
            </td>
        </tr>
    </tbody>
</table>