0

従業員の月給を含む単純な html ファイルを作成しようとしており、各給与に対して支払うべき税金を計算する必要があります。「追加」ボタンを使用して従業員テキストフィールドを追加し、同様の div を含む新しいクラスの div を作成します! 給与テキストフィールドの onchange イベントで、適切な従業員の税額を設定できません!

残念ながら、スクリーンショットをアップロードできないため、質問をできるだけ明確にするためにすべてのコードを配置しました。

これはhtmlコードです：

<div id="all_emps">
    <div class="em_area">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input class=em_sal type=text required  size=10 />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input class=em_tax type=text required size=10 readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="add_emp">Add</a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
        <a href="#" id="del_emp">Remove</a>
    </div>  
</div>

そして、ここにjqueryコードがあります：

$(document).ready(function(){
var counter = 2;
$("#add_emp").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
     .attr("class", 'em_area' + counter);

newTextBoxDiv.after().html('<br><label>Employee '+counter+' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required />  ' );
newTextBoxDiv.appendTo("#all_emps");
counter++;
 });

 $("#del_emp").click(function () {
if(counter==2)
{
    alert("Can not remove the only employee!");
}
else{
    counter--;
    $(".em_area" + counter).remove();
}
 });
  $('#em_area').on('change' , '.em_sal', function() { // Fire the change event

var salary = parseInt(this.value);
var dueTax = 0;
if(salary < 5000){  
    alert('Salary less than 5000!!');
}
else if(salary >= 5000)
{
    due_tax= salary/100;
    due_tax= salary - due_tax;
}
// This will get the corresponding tax input for the employee..
$(this).closest('div').find('.em_tax').val(due_tax) ;
});
});
4

1 に答える 1

0

少しリファクタリングしました。これall_empsで、divが1つdiv、従業員ごとに1つになります。id="em<counter>"

JsFiddle

html部分：

<div id="all_emps">
    <div id="em1">
        <label>Employee 1</label>
        <input type=text required  />
        <label>Position</label>
        <input type=text required  />
        <label>Monthly Salary</label>
        <input class=em_sal type=text required  size=10 />
        &nbsp &nbsp &nbsp 
        <label>Salary Tax</label>
        <input class=em_tax type=text required size=10 readonly />
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    </div> 
    <a href="#" id="add_emp">Add</a>
        &nbsp &nbsp &nbsp &nbsp &nbsp
     <a href="#" id="del_emp">Remove</a>    
</div>​​​​​​

jsパート

$(document).ready(function() {
    var counter = 2;
    $("#add_emp").click(function() {
        var newTextBoxDiv = $(document.createElement('div'));
        newTextBoxDiv.attr("id", 'em' + counter);

        newTextBoxDiv.html('<br><label>Employee ' + counter + ' </label> <input id=em_name name=em_name type=text required  /> <label>Position</label> <input id=em_post name=em_post type=text required  /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required  /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required />  ');

        $("#all_emps div").last().after(newTextBoxDiv);
        counter++;
    });

    $("#del_emp").click(function() {
        if (counter == 2) {
            alert("Can not remove the only employee!");
        } else {
            counter--;
            $("#em" + counter).remove();
        }
    });
    $('#all_emps').on('change', '.em_sal', function() { // Fire the change event
        var salary = parseInt(this.value);
        var due_tax= 0;
        if (salary < 5000) {
            alert('Salary less than 5000!!');
        } else{
            due_tax = salary / 100;
            due_tax = salary - due_tax;
        }
        // This will get the corresponding tax input for the employee..
        $(this).closest('div').find('.em_tax').val(due_tax);
    });
});

</ p>

于 2012-10-22T12:37:37.933 に答える