javascript - 根据值动态更改 HTML 公社中的字段颜色
问题描述
“盈余”和“不足”列给了我时间上的差异,问题是我必须以某种方式区分它们。
我是这个主题的新手,关键是如果这两列中的字段值与 00:00 不同,它会将颜色更改为不同的颜色。
但只有单个字段,而不是整个列。有人有想法吗?
编辑小提琴 - JSFiddle [^]
带有表格 html 的代码
function diff(start, end) {
start = start.split(":");
end = end.split(":");
const startDate = new Date(0, 0, 0, start[0], start[1], 0);
const endDate = new Date(0, 0, 0, end[0], end[1], 0);
let diff = endDate.getTime() - startDate.getTime();
const hours = Math.floor(diff / 1000 / 60 / 60);
diff -= hours * 1000 * 60 * 60;
const minutes = Math.floor(diff / 1000 / 60);
return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes;
}
function diffMs(start, end) { // this function can help you calculate a difference for a logical purposes
return +start.split(":").join('') - +end.split(":").join('');
}
document.querySelector('table').addEventListener('change', function(e) {
const classList = e.target.classList
if (classList.contains('start') || classList.contains('end')) {
//retrieve the associated inputs
const tr = e.target.parentNode.parentNode
const [start, end, actual, normative, surplus, deficiency] = [...tr.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')]
const value = diff(start.value, end.value);
actual.value = value
if (diffMs(actual.value, normative.value) >= 0) {
surplus.value = diff(normative.value, actual.value);
}
if (diffMs(actual.value, normative.value) <= 0) {
deficiency.value = diff(actual.value, normative.value);
}
}
})
<table>
<thead>
<tr>
<th>start</th>
<th>end</th>
<th>actual</th>
<th>normative</th>
<th>surplus</th>
<th>deficiency</th>
</tr>
</thead>
<tbody>
<tr class="day">
<td><input type="time" class="start" id="start_1" value="08:00"></td>
<td><input type="time" class="end" id="end_1" value="15:00"></td>
<td><input type="time" class="actual" id="actual_1" value="07:00" readonly></td>
<td><input type="time" class="normative" id="normative_1" value="08:00" readonly></td>
<td><input type="time" class="surplus" id="surplus_1" value="00:00" readonly></td>
<td><input type="time" class="deficiency" id="deficiency_1" value="00:00" readonly></td>
</tr>
<tr class="day">
<td><input type="time" class="start" id="start_2" value="08:00"></td>
<td><input type="time" class="end" id="end_2" value="17:00"></td>
<td><input type="time" class="actual" id="actual_2" value="09:00" readonly></td>
<td><input type="time" class="normative" id="normative_2" value="08:00" readonly></td>
<td><input type="time" class="surplus" id="surplus_2" value="00:00" readonly></td>
<td><input type="time" class="deficiency" id="deficiency_2" value="00:00" readonly></td>
</tr>
</tbody>
</table>
注意: 我不想使用 id 因为,我有超过 30 条记录
两列的值指的是这个案例的“盈余”和“不足”
解决方案
检查这个jsfiddle:https ://jsfiddle.net/9v8pjqna/
在您检查“盈余”或“效率”的“差异”的条件下,添加另一个简单条件以检查它们的值是否不同于 0。如果是,请访问输入的 backgroundColor 属性并更改它。
if (diffMs(actual.value, normative.value) >= 0) {
surplus.value = diff(normative.value, actual.value);
if(surplus.value != 0) {
surplus.style.backgroundColor = "red";
}
}
if (diffMs(actual.value, normative.value) <= 0) {
deficiency.value = diff(actual.value, normative.value);
if(deficiency.value != 0) {
deficiency.style.backgroundColor = "red";
}
}
推荐阅读
- javascript - javascript中的微任务和宏任务有什么区别?
- sparql - 在 SPARQL 中按 ObjectProperty 显示
- android - 无法在android中选择微调器项目
- pdf - 编辑 Oracle APEX 后将 iFrame 中加载的 pdf 文件保存到数据库
- r - 如何在 R 中创建三分位数
- javascript - 为什么括号在这个创建 JavaScript 对象的 .reduce() 语法中的作用?
- jquery - 添加由 jquery append 方法生成的事件
- javascript - dict 不为空时的 ng-show
- java - Android androidx.SearchView 不工作
- .net - Azure 应用服务和 .Net Framework 版本