Question

我正在使用表来输出数据的旧网站。我想做的是以下内容 - 但我不知道如何使用jQuery进行此操作。

在第一栏：单位的美元价格（类'buyformunitprice'）

在第二列：有一个输入框，允许用户输入项目的数字数量。此列的类别为“buyformquantity”。

在第三栏：这应显示第一列*第二列。因此，如果用户输入了10个项目，并且价格是170美元（显然这可能会改变） - 那么这里的价值将是1700美元。此列的类别为“buyformunitpricetotal”

到目前为止，我只有这个HTML（Fiddle here）：

<table>
<tr>
<td class="buyformcells buyformunitprice">$170</td>
<td class="buyformcells buyformquantity"><input type="text" name="quantity"></td>
<td class="buyformcells buyformunitpricetotal"></td>
</tr>
</table>

Answer 1

看到这个小提琴

http://jsfiddle.net/R9eE7/4/

<table>
<tr>
<td class="buyformcells buyformunitprice">$170</td>
    <td class="buyformcells buyformquantity"><input type="text" name="quantity" /></td>
<td class="buyformcells buyformunitpricetotal"></td>
</tr>

$('input[name=quantity]').blur(function(){
if ($(this).attr('value').length > 0) {
     var price = parseInt($('.buyformunitprice').text().replace('$', ''));
    var quantity = parseInt($(this).attr('value'));
    var total = price * quantity;
    $('.buyformunitpricetotal').html(total);
}

}）;

我将一个模糊事件附加到文本框（当用户点击文本框时会触发）。检查以确保用户通过检查长度向文本框输入了一些输入，然后将值转换为整数。您可能需要进行一些错误检查以确保文本框中的值为int。然后更新总列的hmtl。

Answer 2

这是另一个进行计算的选项。

http://jsfiddle.net/R9eE7/9/

在html脚本上，我将id附加到input和td元素，以允许jQuery能够检索值。

<table>
    <tr>
        <td class="buyformcells buyformunitprice">$170</td>
        <td class="buyformcells buyformquantity">
            <input id="quantity" type="text" name="quantity">
        </td>
        <td id="total" class="buyformcells buyformunitpricetotal"></td>
    </tr>
</table>
<!-- insert the price into calc function 1st parameter -->
<button onclick="calc(170, parseInt($('#quantity').val()))">Calculate</button>

和calc函数

function calc(price, quantity) {       
    $("#total").html(price * quantity);
}

jQuery：对HTML表中包含的数据执行基本计算

2 个答案: