从动态生成的控件中获取所选输入控件的值<；tr>；jquery中表的索引

我对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>');

---

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

主要问题是，当通过onchange属性调用更新函数时，需要将

此

传递到更新函数中

另外，

Number（row.find（'#quan'）.text（））

应该是

Number（row.find（'#quan'）.val（））

，因为它是一个输入，所以您需要的是值，而不是文本

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

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

此代码应按您的需要工作：

JS

$（.pr_row:last”）。在（''+k++'+tp[0]+'+tp[4]+'+tp[2]+'0.00'）之前；
功能更新（元素）{
var行=$（元素）.parents（'.pr_行'）；
var price=Number（row.find（'.quan'）.val（））*row.find（'.rate'）.val（）；
isNaN（价格）？row.find（'.amt'）.html（“不适用”）：row.find（'.amt'）.html（价格）；
}

HTML

1.
产品1
50
150
0

---

工作示例-

您正在犯很多错误，我将在稍后讨论这些错误。现在，也许考虑重构代码看起来像（<强> < /强>）：

//您不断复制的标准输入
变量$input=$（''）
$input.on（“更改”，函数（）{
var行=$（this.parents（'.prw'）；
var price=Number（row.find（'.quan'）.val（））*Number（row.find（'.rate'）.val（））；
isNaN（价格）？row.find（'.amt'）.html（“不适用”）：row.find（'.amt'）.html（价格）；
});
//将标准输入复制到新单元格并为其指定名称和类的方法
函数新输入单元（名称）{
返回$（“”）
.附加(
$input.clone（真）
艾特先生({
“类”：名称，
“名称”：名称
})
);
}
$tr=$（“”）；
$tr.append（'K VALUETP0 VALUE'，
新的输入单元（“速率”），
新的输入单元（“quan”），
' 0.00 '
);
美元（“.prw:last”）。之前（$tr）；

我提到的问题：

• 您经常使用

  ID

  s，您应该使用

  class

  es<代码>IDs应用于引用唯一元素
• 我认为不再使用

  onclick

  方法了。尝试从脚本中分配事件
• 您正在查找“quan”元素的

  .text（）

  ，而不是

  .val（）

• 您试图将'quan

  .text（）

  转换为一个数字，然后将其与'rate'

  .val（）

  相乘。相反，您应该将

  .val（）

  s转换为数字，然后将它们相乘
• 您创建jQuery对象和DOM元素的漫长过程很难理解，我已经将其分解为更容易理解的内容

---

显示的HTML不完全正确。输入上缺少自动关闭标记。您正在生成多个重复的id，这也是无效的。建议你改为使用类。您也没有将此消息传递给调用（如

onchange=“update（this）”

）。对于输入值，您还引用了

text（）

，而不是

val（）

：

在这里工作：

---

在您所说的生成的代码中，没有

#pr_row

元素。在JS中，字符串不能跨越多行，除非您在末尾使用

`对其进行转义，或者使用
+`也-
$（“#pr_row:last”）
将每行拆分并concat，这意味着您有多行
#pr_row
，因为您的ID应该是唯一的。@IanClark代码最初在一行上，OP编辑它以使其更可读。@Rorymcrossan yeh我想是的。。。小提琴很棒…实际上他将左参数转换为一个数字，然后进行乘法（这在第二个字符串的隐式转换中进行了），但所有其他问题都是有效的。@HiTechMagic good spot，尽管没有保证
。val（）
是一个数字，所以他也需要解决这个问题。您好@richard，
使用了您的解决方案[附加到主要问题]现在连行都没有插入。您是否有一个类为
pr_row
的现有行？控制台中显示任何错误消息？@user2685384请阅读我们所有答案上的注释。您需要更改标记，因为它也是错误的。
<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>

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);
    }

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

<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>

// 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);

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);
}