Question

我已经使用节点js MySQL查询在ejs中列出了表格和表格。如下，

<% aitems.forEach(function(item){ %>
  <tr>    
    <td>
      <div>
        <%= item.fullname %>
      </div>
      <div class="small text-muted">
        <%=  item.designation %>
      </div>
    </td>
    <td>
      <div>
        <input type="number" class="form-control" onkeyup="attendance_calculation()" id="sick_leave<%=  item.idemployee %>" name="sick_leave" placeholder="Sick Leave">
        <input type="number" class="form-control" id="available_sick_leave<%=  item.idemployee %>" name="available_sick_leave" value="<%=  item.available_sick_leave %>" placeholder="Sick Leave" hidden>
      </div>
    </td>
    <td>
      <div>
        <input type="number" class="form-control" onkeyup="attendance_calculation()" id="casual_leave<%=  item.idemployee %>" name="casual_leave" placeholder="casual Leave">
        <input type="number" class="form-control" id="available_casual_leave<%=  item.idemployee %>" name="available_casual_leave" value="<%=  item.available_casual_leave %>" placeholder="Sick Leave" hidden>
      </div>
    </td>
    <td>
      <div>
        <input type="number" class="form-control" id="total_work_days<%=  item.idemployee %>" name="total_work_days" value="30" placeholder="Present Days">
      </div>
    </td>
    <td>
      <div>
        <input type="number" class="form-control" name="overtime" placeholder="Over Time Hours">
      </div>
    </td>
  </tr>
  <% }); %>

每个输入控件的ID由MySQL查询数据生成，直到循环结束。该ID还需要在Java脚本中自动生成以下代码。

if (document.getElementById('sick_leave').value != 0) {
  var sick_leave =
    (document.getElementById('sick_leave').value) - 1 || 0;
} else {
  var sick_leave =
    (document.getElementById('sick_leave').value) || 0;
}
if (document.getElementById('casual_leave').value != 0) {
  var casual_leave =
    (document.getElementById('casual_leave').value) - 0.5 || 0;
} else {
  var casual_leave =
    (document.getElementById('casual_leave').value) || 0;
}

var total_days = 30;
var total_work_days = parseFloat(total_days) -
  (parseFloat(sick_leave) + parseFloat(casual_leave));
document.getElementById('total_work_days').value = total_work_days;

Answer 1

您必须传递要在key up事件参数上更新的元素的引用，并将当前元素ID作为“数据ID”存储在元素属性中。

<input type="number" class="form-control" onkeyup="attendance_calculation(this)" data-id="<%=  item.idemployee %>" id="sick_leave<%=  item.idemployee %>" name="sick_leave" placeholder="Sick Leave">
<input type="number" class="form-control" onkeyup="attendance_calculation(this)" data-id="<%=  item.idemployee %>" id="casual_leave<%=  item.idemployee %>" name="casual_leave" placeholder="casual Leave">

现在我们可以在Attenance_Calculation函数中更新元素。

var attendance_calculation = function (el) {

    /* if you can use jQuery */
    var el = $(el);
    var id = el.data('id');

    /* withouth jQuery*/
    var id = el.getAttribute('data-id');

    //now we can generate input elements id
    var sick_leave = "sick_leave" + id;
    var casual_leave = "casual_leave" + id;

    ... 
    // your remaing logic... 

}

需要从html声明的ID自动生成document.getbyElementID的ID

1 个答案: