Question

我遇到了jQuery中的一段代码问题。这里我使用以下代码动态生成表的行。每行包含两个不同TD中的两个输入元素。这是用于它的代码[Working Fine]：

$("#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);
    }

成功执行后，它应该更新内部HTML。但它没有用。调试后，我发现该函数无法读取“#quan”和“#rate”的输入值。请帮帮我。

Answer 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来使用class es。 ID应该用于引用唯一元素
我不认为再使用onclick方法是一种很好的做法。尝试从脚本中分配事件
您找到了'quan'元素的.text()，而不是.val()。
您试图将“quan .text()转换为数字，然后将其与'rate'.val()相乘。相反，您应该将.val()转换为数字，然后将它们相乘。
你创建一个jQuery对象和DOM元素的长线很难阅读，我把它分成了一些应该更容易理解的东西。

Answer 2

主要问题是，在通过onchange属性调用时，需要将this传递给更新函数。

此外，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/

Answer 3

显示的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);
}

从动态生成的jquery中的表中获取所选输入控件的值

3 个答案:

我已解决的问题：

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