0

我对 jQuery 中的一段代码有疑问。在这里，我使用以下代码为表动态生成行。每行包含两个不同 TD 中的两个输入元素。这是用于它的代码[工作正常]：

$("#pr_row:last").before(
'<tr id="pr_row" class="prw"><td id="pno">'+k+'</td>
<td id="prod">'+tp[0]+'</td><td>'+tp[4]+'</td>
<td>'+tp[2]+'</td><td><input type="text" class="rate" id="rate" onchange="update()"  name="rate" value="0.00"> </td> 
<td> <input type="text" id="quan"  class="quan" onchange="update()"  name="quan" value="0.00"> </td> <td id="amt"> 0.00 </td> 
</tr>');

此代码生成下表行：

<tr id="pr_row">
<td id="pno">1</td>
<td class="undefined" id="prod">prod 1</td>
<td class="undefined">50</td>
<td>150</td>
<td><input class="rate" id="rate" onchange="update()" name="rate" value="0.00" type="text"> </td>
<td> <input id="quan" class="quan" onchange="update()" name="quan" value="0.00" type="text"> </td>
<td id="amt"> 0.00 </td>
</tr>

现在问题出在行中的输入元素上。他们调用了下面的函数，需要计算amount = rate * quan。这是函数 update() 的代码：

function update() {
    var row = $(this).parents('#pr_row');
    var price = Number(row.find('#quan').text()) * row.find('#rate').val();
    isNaN(price) ? row.find('#amt').html("N/A") : row.find('#amt').html(price);
    }

成功执行后，它应该更新 . 但它不起作用。经过调试，我发现该函数无法从“#quan”和“#rate”读取输入值。请帮我。

4

3 回答 3

1

你犯了很多错误，我稍后会解决这些问题。现在，也许考虑重构你的代码看起来像（JSFiddle）：

// A standard input you keep duplicating
var $input = $('<input type="text" value="0.00" />')
$input.on("change", function() {
    var row = $(this).parents('.prw');
    var price = Number(row.find('.quan').val()) * Number(row.find('.rate').val());
    isNaN(price) ? row.find('.amt').html("N/A") : row.find('.amt').html(price);
});
// A method to copy our standard input into a new cell and assign it a name and class
function new_input_cell(name) {
    return $("<td></td>")
        .append(
            $input.clone(true)
                .attr({
                    'class': name,
                    'name' : name
                })
        );
}

$tr = $("<tr class='prw'></tr>");
$tr.append('<td class="pno">K VALUE</td><td class="prod">TP0 VALUE</td>',
           new_input_cell("rate"),
           new_input_cell("quan"),
           '<td class="amt"> 0.00 </td>'
          );
$(".prw:last").before($tr);

我已经解决的问题：

  • 你经常ID在应该使用classes 的地方使用 s。IDs 应该用于引用唯一元素
  • onclick我认为不再使用一种方法是很好的做法。尝试从脚本中分配事件
  • 你正在寻找.text()你的'quan'元素，而不是它.val()。
  • 您试图将您的 'quan 转换.text()为一个数字，然后将其与 'rate' 相乘.val()。相反，您应该将.val()s 转换为数字，然后将它们相乘。
  • 您创建 jQuery 对象和 DOM 元素的长线非常难以阅读，我将其拆分为应该更容易理解的内容。
于 2013-08-15T11:02:53.697 回答
0

主要问题是您需要在this通过 onchange 属性调用更新函数时传入它。

此外，Number(row.find('#quan').text())应该是Number(row.find('#quan').val())因为它是一个输入，所以你想要的是值，而不是文本。

您也不应该使用 ID 来识别多个元素。改用一个类。

最后，输入标签应正确关闭，如下面的 HTML 所示。

此代码应按您的意愿工作：

JS

$(".pr_row:last").before('<tr class="prw pr_row"><td id="pno">'+k+'</td><td id="prod">'+tp[0]+'</td><td>'+tp[4]+'</td><td>'+tp[2]+'</td><td><input type="text" class="rate" onchange="update(this)" name="rate" value="0.00"/> </td> <td> <input type="text" class="quan" onchange="update(this)"  name="quan" value="0.00"/> </td> <td class="amt"> 0.00 </td> </tr>');

function update(element) {
    var row = $(element).parents('.pr_row');
    var price = Number(row.find('.quan').val()) * row.find('.rate').val();
    isNaN(price) ? row.find('.amt').html("N/A") : row.find('.amt').html(price);
}

HTML

<table>
    <tr class='pr_row'>
        <td id="pno">1</td>
        <td class="undefined">prod 1</td>
        <td class="undefined">50</td>
        <td>150</td>
            <td><input class="rate" onchange="update(this)" name="rate" value="0.00" type="text"/> </td>
            <td> <input class="quan" onchange="update(this)" name="quan" value="0.00" type="text"/> </td>
        <td class="amt"> 0.00 </td>
    </tr>
</table>

工作示例 - http://jsfiddle.net/TwkV2/

于 2013-08-15T11:01:17.750 回答
0

显示的 HTML 并不完全正确。您在输入上缺少自闭合标记。您正在生成多个重复的 id，这也是无效的。建议你改用类。您也没有将其传递给调用（如 中onchange="update(this)"）。您还引用text()而不是val()输入值：

在这里工作 JSFiddle：http: //jsfiddle.net/2CYxQ/1/

function update(ctrl) {
    var $c = $(ctrl);
    var $row = $(ctrl).closest('tr');
    var price = Number($row.find('.quan').val()) * $row.find('#rate').val();
    isNaN(price) ? $row.find('.amt').html("N/A") : $row.find('#amt').html(price);
}
于 2013-08-15T11:03:12.273 回答