Javascript 需要生成document.getbyElementID'；自动从html声明的ID中删除ID

我使用NodeJSMySQL查询在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>
  <% }); %>  

---

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

---

您不必为此类问题动态生成代码。你没有展示足够的你想要做的事情来确切地知道建议什么，但是通常像这样的代码可以通过一些常用函数的组合来处理，这些函数包含参数、对象的动态属性、预先确定的ID名称数组、检查页面内容以决定它们必须做什么的查询等等。。。

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; 

<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">

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... 

}