Question

我正在尝试创建一个包含员工月薪的简单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) ;
});
});

Answer 1

重构了一下。您现在有一个all_emps div，每位员工一个div，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 part

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

使用jquery设置输入值

1 个答案: