Question

我有以下HTML代码：

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

在文本框的onblur事件中，我想调用一个javascript函数，它将用户添加的数量乘以速率并将其显示在txtPrice文本框中。但我仍然坚持我应该如何选择与输入数量相对应的费率的逻辑。

例如：当我在txtItemA文本框中输入2时，40应该显示在txtPrice文本框中。 Javascript函数很简单，它只是将输入的数量乘以速率并在txtPrice中显示。

如何获取与数量相关联的费率并将其传递给javascript函数？

Javascript功能

function DisplayTotal(rate, quantity)
{
  document.getElementById('txtPrice').innerText = rate * quantity;
}

Answer 1

为有问题的元素提供一个共同的类，比如说class="quantity"，这样可以轻松选择它们而不会列出id或者选择太过一般的选择器来获取总价格字段，然后就可以了这样做：

var $qtyFields = $('input.quantity').change(function() {
    var price = 0;
    $qtyFields.each(function() {
        price += this.value * $(this).closest("tr").find("td:eq(1)").text();
    });
    $("#txtPrice").val(price);
});

演示：http://jsfiddle.net/95hje/

即，遍历每个字段并将其值乘以同一行中的rate列。通过使用.closest()获取共同的祖先，然后.find()遍历回来查找相关元素是一种常见的模式。

请注意，*运算符会将其操作数强制为数字，但我显示的代码实际上并未进行任何验证，因此如果用户输入非数字数据，则总计将为{{1 }} ...

Answer 2

一个纯粹的javascript解决方案（没有JQuery），即使你改变了表中的行数并处理了无效用户输入的问题，它也能工作：

<html>
<head>
<script type="text/javascript">
function DisplayTotal(){
var num = document.getElementById("myTable").rows.length-2;
var tds = document.getElementsByTagName("td"), total = 0, rate, quant;
    for(var i = 0; i < num; i++){
    rate = parseInt(tds[3*i+1].innerHTML);
    quant = parseInt(tds[3*i+2].firstChild.value);
        if(isNaN(quant)){
        continue;
        }
    total += rate*quant;
    }
document.getElementById("txtPrice").value = total;
}
</script>
</head>
<body>
<table id="myTable">
    <tr><th>Items</th><th>Rate</th><th>Quantity</th></tr>
    <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item D</td><td>50</td><td><input type="text" id="txtItemD" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Total Price</td><td><input type="text" id="txtPrice"></td></tr>
</table>
<button type="button" onclick="DisplayTotal();">Get Total Price</button>
</body>
</html>

请参阅演示here。

Answer 3

jsfiddle： http://jsfiddle.net/FeLKx/4/

HTML：

<table class="items">
    <thead>
        <th>Items</th>
        <th>Rate</th>
        <th>Quantity</th>
    </thead>
    <tbody>
        <tr class="item">
            <td>Item A</td>
            <td class="rate">20</td>
            <td class="quantity">
                <input type="text" id="txtItemA" />
            </td>
        </tr>
        <tr class="item">
            <td>Item B</td>
            <td class="rate">10</td>
            <td class="quantity">
                <input type="text" id="txtItemB" />
            </td>
        </tr>
        <tr class="item">
            <td>Item C</td>
            <td class="rate">30</td>
            <td class="quantity">
                <input type="text" id="txtItemC" />
            </td>
        </tr>
        <tr>
            <td>Total Price</td>
            <td>
                <input type="text" id="txtPrice" />
            </td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function () {
    $('.items .item .quantity input').blur(function () {
        var total = 0;

        $('.items .item').each(function(index, value) {
            var rate = $(this).find('.rate').text();
            var quantity = $(this).find('.quantity input').val();

            total += rate * quantity;
        });

        $('#txtPrice').val(total);
    });
});

Answer 4

更改标记以将一些类添加到输入元素以便于选择

<table>
    <th>Items</th>
    <th>Rate</th>
    <th>Quantity</th>
    <tr>
        <td>Item A</td>
        <td>20</td>
        <td>
            <input type="text" class="txtItem" id="txtItemA" />
        </td>
    </tr>
    <tr>
        <td>Item B</td>
        <td>10</td>
        <td>
            <input type="text" class="txtItem" id="txtItemB" />
        </td>
    </tr>
    <tr>
        <td>Item C</td>
        <td>30</td>
        <td>
            <input type="text" class="txtItem" id="txtItemC" />
        </td>
    </tr>
    <tr>
        <td>Total Price</td>
        <td>
            <input type="text" id="txtPrice" />
        </td>
    </tr>
</table>

然后

jQuery(function () {
    var $items = $('.txtItem').change(function () {
        var total = 0;
        $items.each(function () {
            total += ($(this).data('price') * parseInt(this.value)) || 0;
        })
        $('#txtPrice').val(total)
    }).each(function () {
        //store the price of the item in data for easy access later
        $(this).data('price', parseInt($(this).parent().prev().text(), 10) || 0);
    })
})

演示：Fiddle

Answer 5

我猜的是最简单的解决方案（没有jQuery）：

<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script language="javascript" type="text/javascript">
         function DisplayTotal()
         {
            var quantity = 0, rate = 0, total=0;
            var i=0;
            do {
                var c = document.getElementById("txtItem" + i++);
                if (c) {
                    var r = c.parentNode.previousSibling;
                    if (c.value) {
                        quantity = parseFloat(c.value);
                        rate = parseFloat(r.innerHTML);
                        total += quantity * rate;
                    }
                }
            } while(c);
            document.getElementById('txtPrice').value = total.toFixed(2);
         }
    </script>
</head>
<body>
   <table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItem0"  onblur="DisplayTotal()"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItem1" onblur="DisplayTotal()"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItem2" onblur="DisplayTotal()"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
   </table>
</body>

Answer 6

这是你的HTML

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

这将是您的脚本

$(document).ready(function(){
    $('table').on('blur','td input[id^=txtItem]',function(){
        var fields = $('td input[id^=txtItem]');
        var total = 0;

        $.each(fields,function(index,value){
            var quantity = $(this).val();
            var rate = $(this).parent('td').prev('td').text();
            total += (quantity * rate);            
        });       
        $('#txtPrice').val(total);
    });
});

JSFIDDLE DEMO

在笔记中我强烈建议您不要依赖javascript来最终向访问者收取费用，因为可以使用javascript轻松将其更改为0

Answer 7

在此处查看演示http://jsfiddle.net/UFS97/1/

HTML

<table id="invoice_tbl">
        <th>Items</th>
        <th>Rate</th>
        <th>Quantity</th>
        <tr class="item">
            <td>Item A</td>
            <td>20</td>
            <td>
                <input type="text" class="item_price" id="txtItemA" value=""/>
            </td>
        </tr>
        <tr class="item">
            <td>Item B</td>
            <td>10</td>
            <td>
                <input type="text" class="item_price" id="txtItemB"/>
            </td>
        </tr>
        <tr class="item">
            <td>Item C</td>
            <td>30</td>
            <td>
                <input type="text" class="item_price" id="txtItemC" value=""/>
            </td>
        </tr>
        <tr>
            <td>Total Price</td>
            <td>
                <input type="text" id="txtPrice"/>
            </td>
        </tr>
    </table>



jQUery
---------------------------
    $(document).ready(function(){ 
    $(".item_price").blur(function(){
    total = 0.00;
    item_row = $("table#invoice_tbl").children('tbody').children("tr.item");
    item_row.each(function(){
        item_price = parseFloat($(this).children('td').eq(1).html());
        item_qty = parseInt($(this).children('td').eq(2).children('input').val());
        row_price = item_price*item_qty;
        if(!isNaN(row_price)){
            total +=row_price;
        }
    });
    $("#txtPrice").val(total);
});
});

在此处查看演示http://jsfiddle.net/UFS97/1/

如何获取td元素并传递给javascript函数？

7 个答案:

HTML