どのように動的に作成されたテキストボックスの値を合計するには？

動的に作成されたtextboxの値を合計しますが、機能しません。どのように動的に作成されたテキストボックスの値を合計するには？

$(document).ready(function() { 
 

 
    //iterate through each textboxes and add keyup 
 
    //handler to trigger sum event 
 
    $(".code").each(function() { 
 

 
    $(this).keyup(function() { 
 
     calculateSum(); 
 
    }); 
 
    }); 
 

 
}); 
 

 
function calculateSum() { 
 

 
    var sum = 0; 
 
    //iterate through each textboxes and add the values 
 
    $(".code").each(function() { 
 

 
    //add only if the value is number 
 
    if (!isNaN(this.value) && this.value.length != 0) { 
 
     sum += parseFloat(this.value); 
 
    } 
 

 
    }); 
 
    //.toFixed() method will roundoff the final sum to 2 decimal places 
 
    $("#sum").html(sum.toFixed(2)); 
 
} 
 

 
function addrow() { 
 
    $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td> \t \t         <td><input type="text" class="code" id="code" placeholder="Amount"/> &nbsp;</td> </tr>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="customFields"> 
 
    <tr> 
 
    <td> 
 
     <input type="button" value="Add" onclick="addrow();" /> 
 
    </td> 
 
    </tr> 
 
</table>

出典

2017-05-12 arif

は、私はあなたが欲しいものを理解することに苦労しています参照してください。あなたはいつ、どのように生成されますか？ –

#sum要素が必要でしょうか？ – K3v1n

私も有する#sum要素 \t \t \t \t \t 合計： \t \t < td align = "center"> 0 \t – arif

新しい動的に作成された要素との相互作用を可能にする、テーブルの上に.on()を使用する必要があります。これにより、.codeのすべてのkeyup（ページロード後に追加されたものさえも）が#customFieldsにバブルアップすることが許可されます。残りのコードは変更する必要はありません。

$(document).ready(function() { 
    $("#customFields").on("keyup", ".code", function(){ 
     calculateSum(); 
    }); 
});

http://api.jquery.com/on/

出典

2017-05-12 03:52:27

ありがとう...そう多くは...今すぐ働いています... @ムーア – arif

@arif回答の左側にある灰色の目盛りをクリックして受け入れられた答えとします。 – K3v1n

をクリックしてください... @ K3v1n – arif

-1

Running Code

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    //iterate through each textboxes and add keyup 
    //handler to trigger sum event 
    $(".code").each(function() { 

    $(this).keyup(function() { 
     calculateSum(); 
    }); 
    }); 

}); 

function calculateSum() { 

    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".code").each(function() { 

    //add only if the value is number 
    if (!isNaN(this.value) && this.value.length != 0) { 
     sum += parseFloat(this.value); 
    } 

    }); 
    //.toFixed() method will roundoff the final sum to 2 decimal places 

    $("#sum").html(sum.toFixed(2)); 
} 

function addrow() { 
    $("#customFields").append('<tr><td><input type="text" class="ename" id="name" placeholder="Expense Name"/> &nbsp;</td>           <td><input type="text" class="code" id="code" placeholder="Amount" onKeyUp = "calculateSum()"/> &nbsp;</td> </tr>'); 
} 
</script> 
</head> 
<body> 

<table id="customFields"> 
    <tr> 
    <td colspan ="2"> 
     <input type="button" value="Add" onclick="addrow();" /> 
    </td> 
    </tr> 
    <tr><td><div id="sum">value</div></td></tr> 
</table> 

</body> 
</html>

出典

2017-05-12 04:12:05

あなたのコードに書きます。私はあまりにも多くの質問をしています気にしないでください – arif

どのように動的に作成されたテキストボックスの値を合計するには？

答えて

関連する問題