0

jQuery のコードに問題があります。ここでは、次のコードを使用してテーブルの行を動的に生成しています。各行には、2 つの異なる TD に 2 つの入力要素が含まれています。これに使用されるコードは次のとおりです[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」から入力値を読み取ることができないことがわかりました。私を助けてください。

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

私が対処した問題:

  • esIDを使用すべきところに s を日常的に使用しています。固有の要素を参照するには s を使用する必要がありますclassID
  • onclickメソッドを使用するのはあまり良い習慣ではないと思います。スクリプト内からイベントを割り当ててみてください
  • .text()ではなく、「quan」要素のを見つけていました.val()。
  • .text()'quanを数値に変換してから、'rate'を掛けようとしました.val()。.val()代わりに、 s を数値に変換してから乗算する必要があります。
  • jQuery オブジェクトと DOM 要素を作成する長い行は非常に読みづらかったので、理解しやすいように分割しました。
于 2013-08-15T11:02:53.697 に答える
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 に答える