根据用户输入、插入或构建来创建每小时收费计划？
Create a hourly charge schedule based off of user input, plug in or build?
我正在根据用户输入建立一个收费时间表以供反思，但我犹豫是要尝试寻找并调整插件，还是自己建立。
该时间表是在早上 7 点到下午 16 点之间为电动汽车充电的太阳能充电时间表。有6辆汽车和6个太阳能充电器。
我已经构建了第一个 table，用户可以在其中输入汽车登记信息、剩余里程数、下一段旅程所需的英里数以及他们为该旅程需要离开的时间。
时间表必须考虑到上述情况，然后生成充电时间table，以便每辆车为下一次旅程充分充电。
每辆车的最大续航里程为 250 英里，充电速度为每小时 44 英里。
这是包含整个项目的 JSFiddle：https://jsfiddle.net/Coxy/1r30xgjc/3/
// Charge Table
// name =reg & value = carname
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
//get that values
var regs = $(this).val().toUpperCase();
//check if have class reg
if ($(this).hasClass("reg")) {
//filter json array
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
//check if retrn value is > 0
if (cars_name.length > 0) {
//add value
$(this).closest("tr").find(".name").text(cars_name[0].values)
//hide
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
// console.log(cars_name[0].values)
} else {
//put mesage not valid
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
$('.ltime').val('').prop('disabled', true);
});
$(".confirm").click(function() {
//loop through tr
$("#table_id tbody tr").each(function() {
//check reg value is null
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
//get value
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
//calculate
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
//console.log(miles)
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the miles needed for next trip")
}
})
});
// Get leave time
// $(".confirm").click(function() {
// var car_test = $("#car-1-7").val();
// var lt_time = $(".time").val();
// car_test = lt_time;
// });
$( ".leave-input")
$(".confirm").click(function() {
var value = $( ".leave-input" ).val();
$( "#car-1-7" ).text( value );
})
// Generate time table
$('generate-time-table').click(function() {
})
这是我得到的一个例子，希望能帮助解释我的意思。
我查看了 Stack，似乎没有类似的问题，我一直在寻找可能（经过一些调整）能够做到这一点的插件，但没有找到任何我认为可行的插件。
任何想法或指示都将不胜感激，我对 JS 很陌生，我觉得这有点超出我的范围，我绝对需要 advice/help。
谢谢你的时间。
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7">7 - 8</th>
<th id="8">8 - 9</th>
<th id="9">9 - 10</th>
<th id="10">10 - 11</th>
<th id="11">11- 12</th>
<th id="12">12 -13</th>
<th id="13">13 - 14</th>
<th id="14">14 - 15</th>
<th id="15">15 - 16</th>
<th id="16">16 - 17</th>
<th id="exit_miles">Exit Miles</th>
</tr>
</thead>
<tbody>
<tr>
<td id="car-1">Car 1</td>
<td id="car-1-7" class="charging not_charging">Test</td>
<td id="car-1-8" class="charging not_charging">Test</td>
<td id="car-1-9" class="charging not_charging">Test</td>
<td id="car-1-10" class="charging not_charging">Test</td>
<td id="car-1-11" class="charging not_charging">Test</td>
<td id="car-1-12" class="charging not_charging">Test</td>
<td id="car-1-13" class="charging not_charging">Test</td>
<td id="car-1-14" class="charging not_charging">Test</td>
<td id="car-1-15" class="charging not_charging">Test</td>
<td id="car-1-16" class="charging not_charging">Test</td>
<td id="car-1-exit-miles">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="car-2-7" class="charging not_charging">Test</td>
<td id="car-2-8" class="charging not_charging">Test</td>
<td id="car-2-9" class="charging not_charging">Test</td>
<td id="car-2-10" class="charging not_charging">Test</td>
<td id="car-2-11" class="charging not_charging">Test</td>
<td id="car-2-12" class="charging not_charging">Test</td>
<td id="car-2-13" class="charging not_charging">Test</td>
<td id="car-2-14" class="charging not_charging">Test</td>
<td id="car-2-15" class="charging not_charging">Test</td>
<td id="car-2-16" class="charging not_charging">Test</td>
<td id="car-2-exit-miles">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="car-3-7" class="charging not_charging">Test</td>
<td id="car-3-8" class="charging not_charging">Test</td>
<td id="car-3-9" class="charging not_charging">Test</td>
<td id="car-3-10" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-12" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-14" class="charging not_charging">Test</td>
<td id="car-3-15" class="charging not_charging">Test</td>
<td id="car-3-16" class="charging not_charging">Test</td>
<td id="car-3-exit-miles">60</td>
</tr>
<tr>
<td id="car-4" >Car 4</td>
<td id="car-4-7" class="charging not_charging">Test</td>
<td id="car-4-8" class="charging not_charging">Test</td>
<td id="car-4-9" class="charging not_charging">Test</td>
<td id="car-4-10" class="charging not_charging">Test</td>
<td id="car-4-11" class="charging not_charging">Test</td>
<td id="car-4-12" class="charging not_charging">Test</td>
<td id="car-4-13" class="charging not_charging">Test</td>
<td id="car-4-14" class="charging not_charging">Test</td>
<td id="car-4-15" class="charging not_charging">Test</td>
<td id="car-4-16" class="charging not_charging">Test</td>
<td id="car-4-exit-miles">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="car-5-7" class="charging not_charging">Test</td>
<td id="car-5-8" class="charging not_charging">Test</td>
<td id="car-5-9" class="charging not_charging">Test</td>
<td id="car-5-10" class="charging not_charging">Test</td>
<td id="car-5-11" class="charging not_charging">Test</td>
<td id="car-5-12" class="charging not_charging">Test</td>
<td id="car-5-13" class="charging not_charging">Test</td>
<td id="car-5-14" class="charging not_charging">Test</td>
<td id="car-5-15" class="charging not_charging">Test</td>
<td id="car-5-16" class="charging not_charging">Test</td>
<td id="car-5-exit-miles">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="car-6-7" class="charging not_charging">Test</td>
<td id="car-6-8" class="charging not_charging">Test</td>
<td id="car-6-9" class="charging not_charging">Test</td>
<td id="car-6-10" class="charging not_charging">Test</td>
<td id="car-6-11" class="charging not_charging">Test</td>
<td id="car-6-12" class="charging not_charging">Test</td>
<td id="car-6-13" class="charging not_charging">Test</td>
<td id="car-6-14" class="charging not_charging">Test</td>
<td id="car-6-15" class="charging not_charging">Test</td>
<td id="car-6-16" class="charging not_charging">Test</td>
<td id="car-6-exit-miles">60</td>
</tr>
</tbody>
</table>
澄清一下，我正在尝试找出这背后的功能。我已经在 HTML 中创建了 table，每个单元格都有自己的 ID。
我正在研究如何：检查休假时间与哪辆车有关，获取休假时间，将其四舍五入到最接近的时间，检查在休假时间之前需要充电多少小时。然后填充时间表，更改需要充电的电池的背景颜色。例如。汽车 1 需要充电 3 小时，12 点离开。时间表会显示汽车 1 行，8 - 0, 9 - 10, 10 - 11 单元格背景颜色已更改，出口里程栏显示汽车充电了多少英里.
我希望这能阐明我正在尝试做的事情。
编辑** 已设法将休假时间四舍五入，我使用的是数字，而不是分钟的时间。我有充电所需的小时数。
我现在正在研究如何 select 正确的 table 单元格，并更改该单元格的背景颜色，以及它后面需要更改的任何单元格。
如果有人有任何建议，或者至少可以指出正确的操作方向，或者可以使用的插件，我将非常感谢您的帮助。
我在这方面取得了一些进展，这是最新的fiddle：https://jsfiddle.net/Coxy/bv5jct7n/13/
当用户点击 generate 按钮时，您首先需要循环 first(charge) table 以使用 $(this).find.. 获取所需数据。现在，计算叶子得到 time 输入然后使用 split 获取数组中的时间，即：a[0] for hrs , a[1] for minutes 等等。然后，用 charge 减去它以获得所需的 leaves 。
现在，要将这些信息放入另一个 table 中，请再次使用 each 循环。但是，这里我们将使用 tr:eq('+count+') 遍历 tr > tds，这将一次循环一行。在这里面，我们需要使用 for 循环将 background-color 添加到所需的 td。我在代码中添加了注释，以便您了解其背后的逻辑。
演示代码 :
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
var regs = $(this).val().toUpperCase();
if ($(this).hasClass("reg")) {
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
if (cars_name.length > 0) {
$(this).closest("tr").find(".name").text(cars_name[0].values)
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
} else {
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});
$(".confirm").click(function() {
$("#table_id tbody tr").each(function() {
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the mtnc left")
}
})
});
$(".generate").click(function() {
var count = 0;//for second table
//remove any bg color in td
$("#table_id_2 tbody td").css({
"background-color": ""
});
//loop through first table to get datas
$("#table_id tbody tr").each(function() {
//get required datas
var car1_name = $(this).find(".name").text();
var mtnc = $(this).find(".mtnc").val();
var charges = $(this).find(".charge").text();
var times = $(this).find('.time').val();
//get hours i.e : 11:30 so take "11"
var hrs = times.split(":")[0];
//get leaves
var leaves = parseInt(hrs - charges);
//loop through second table starting from tr eq 0
$("#table_id_2 tbody tr:eq(" + count + ")").each(function() {
$(this).find("td:eq(0)").text(car1_name);//set car_name
//if hrs = 11 and leaves = 2 so loop from 11 -10-9-8..
for (var i = hrs; i >= leaves; i--) {
//add bg to that td
$(this).find("td[value=" + i + "]").css({
"background-color": "yellow"
});;
}
// add exit miles
$(this).find(".exit").text(mtnc)
});
count++;//increment to go to next tr
})
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});
.table {
border: 3px solid #000032;
width: 100%;
}
button {
padding: 10px;
border: none;
font: inherit;
color: white;
background-color: #000032;
margin: 5px;
}
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="table-section" class="table-section">
<div>
<button class="confirm">Confirm</button>
<button class="reset" type="reset">Reset Reg</button>
<table id="table_id" class="table">
<thead>
<tr>
<th id="th-reg">Registration</th>
<th id="th-name">Name</th>
<th id="th-cmr">Current Miles Range</th>
<th id="th-cni">Miles needed for next trip</th>
<th id="th-tl">Hours to charge for next trip</th>
<th id="tpoc">Time Leaving</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-1-name" class="name value-reset"></td>
<td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-1-charge-needed" class="charge"></td>
<td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-2-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-2-name" class="name"></td>
<td><span id="car-2-cmra" class="answer" type="number"></span><input id="car-2-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-2-mtnc" class="answer" type="number"></span><input id="car-2-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-2-charge-needed" class="charge"></td>
<td id="car-2-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-3-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-3-name" class="name"></td>
<td><span id="car-3-cmra" class="answer"></span><input id="car-3-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-3-mtnc" class="answer" type="number"></span><input id="car-3-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-3-charge-needed" class="charge"></td>
<td id="car-3-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-4-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-4-name" class="name"></td>
<td><span id="car-4-cmra" class="answer"></span><input id="car-4-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-4-mtnc" class="answer" type="number"></span><input id="car-4-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-4-charge-needed" class="charge"></td>
<td id="car-4-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-5-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-5-name" class="name"></td>
<td><span id="car-5-cmra" class="answer"></span><input id="car-5-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-5-mtnc" class="answer" type="number"></span><input id="car-5-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-5-charge-needed" class="charge"></td>
<td id="car-5-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-6-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-6-name" class="name"></td>
<td><span id="car-6-cmra" class="answer"></span><input id="car-6-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-6-mtnc" class="answer" type="number"></span><input id="car-6-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-6-charge-needed" class="charge"></td>
<td id="car-6-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
</tbody>
</table>
<button id="generate-time-table" class="generate">Generate Schedule</button>
</div>
</div>
<div id="schedule " class="schedule">
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7" value="7">7 - 8</th>
<th id="8" value="8">8 - 9</th>
<th id="9" value="9">9 - 10</th>
<th id="10" value="10">10 - 11</th>
<th id="11" value="11">11- 12</th>
<th id="12" value="12">12 -13</th>
<th id="13" value="13">13 - 14</th>
<th id="14" value="14">14 - 15</th>
<th id="15" value="15">15 - 16</th>
<th id="16" value="16">16 - 17</th>
<th id="exit_miles" class="exit">Exit Miles</th>
</tr>
</thead>
<tbody>
<!-- add attrr value to each td -->
<tr id="tr-car-1">
<td id="car-2">Car 1</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-1-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-2-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-3-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-4">Car 4</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-4-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-5-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-6-exit-miles" class="exit">60</td>
</tr>
</tbody>
</table>
</div>
注意 ：您输入的时间未验证 min 和 max 您需要使用jquery 这样用户就不会在该时间之后输入。
我正在根据用户输入建立一个收费时间表以供反思，但我犹豫是要尝试寻找并调整插件，还是自己建立。
该时间表是在早上 7 点到下午 16 点之间为电动汽车充电的太阳能充电时间表。有6辆汽车和6个太阳能充电器。
我已经构建了第一个 table，用户可以在其中输入汽车登记信息、剩余里程数、下一段旅程所需的英里数以及他们为该旅程需要离开的时间。
时间表必须考虑到上述情况，然后生成充电时间table，以便每辆车为下一次旅程充分充电。
每辆车的最大续航里程为 250 英里，充电速度为每小时 44 英里。
这是包含整个项目的 JSFiddle：https://jsfiddle.net/Coxy/1r30xgjc/3/
// Charge Table
// name =reg & value = carname
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
//get that values
var regs = $(this).val().toUpperCase();
//check if have class reg
if ($(this).hasClass("reg")) {
//filter json array
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
//check if retrn value is > 0
if (cars_name.length > 0) {
//add value
$(this).closest("tr").find(".name").text(cars_name[0].values)
//hide
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
// console.log(cars_name[0].values)
} else {
//put mesage not valid
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
$('.ltime').val('').prop('disabled', true);
});
$(".confirm").click(function() {
//loop through tr
$("#table_id tbody tr").each(function() {
//check reg value is null
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
//get value
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
//calculate
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
//console.log(miles)
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the miles needed for next trip")
}
})
});
// Get leave time
// $(".confirm").click(function() {
// var car_test = $("#car-1-7").val();
// var lt_time = $(".time").val();
// car_test = lt_time;
// });
$( ".leave-input")
$(".confirm").click(function() {
var value = $( ".leave-input" ).val();
$( "#car-1-7" ).text( value );
})
// Generate time table
$('generate-time-table').click(function() {
})
这是我得到的一个例子，希望能帮助解释我的意思。
我查看了 Stack，似乎没有类似的问题，我一直在寻找可能（经过一些调整）能够做到这一点的插件，但没有找到任何我认为可行的插件。
任何想法或指示都将不胜感激，我对 JS 很陌生，我觉得这有点超出我的范围，我绝对需要 advice/help。
谢谢你的时间。
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7">7 - 8</th>
<th id="8">8 - 9</th>
<th id="9">9 - 10</th>
<th id="10">10 - 11</th>
<th id="11">11- 12</th>
<th id="12">12 -13</th>
<th id="13">13 - 14</th>
<th id="14">14 - 15</th>
<th id="15">15 - 16</th>
<th id="16">16 - 17</th>
<th id="exit_miles">Exit Miles</th>
</tr>
</thead>
<tbody>
<tr>
<td id="car-1">Car 1</td>
<td id="car-1-7" class="charging not_charging">Test</td>
<td id="car-1-8" class="charging not_charging">Test</td>
<td id="car-1-9" class="charging not_charging">Test</td>
<td id="car-1-10" class="charging not_charging">Test</td>
<td id="car-1-11" class="charging not_charging">Test</td>
<td id="car-1-12" class="charging not_charging">Test</td>
<td id="car-1-13" class="charging not_charging">Test</td>
<td id="car-1-14" class="charging not_charging">Test</td>
<td id="car-1-15" class="charging not_charging">Test</td>
<td id="car-1-16" class="charging not_charging">Test</td>
<td id="car-1-exit-miles">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="car-2-7" class="charging not_charging">Test</td>
<td id="car-2-8" class="charging not_charging">Test</td>
<td id="car-2-9" class="charging not_charging">Test</td>
<td id="car-2-10" class="charging not_charging">Test</td>
<td id="car-2-11" class="charging not_charging">Test</td>
<td id="car-2-12" class="charging not_charging">Test</td>
<td id="car-2-13" class="charging not_charging">Test</td>
<td id="car-2-14" class="charging not_charging">Test</td>
<td id="car-2-15" class="charging not_charging">Test</td>
<td id="car-2-16" class="charging not_charging">Test</td>
<td id="car-2-exit-miles">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="car-3-7" class="charging not_charging">Test</td>
<td id="car-3-8" class="charging not_charging">Test</td>
<td id="car-3-9" class="charging not_charging">Test</td>
<td id="car-3-10" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-12" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-14" class="charging not_charging">Test</td>
<td id="car-3-15" class="charging not_charging">Test</td>
<td id="car-3-16" class="charging not_charging">Test</td>
<td id="car-3-exit-miles">60</td>
</tr>
<tr>
<td id="car-4" >Car 4</td>
<td id="car-4-7" class="charging not_charging">Test</td>
<td id="car-4-8" class="charging not_charging">Test</td>
<td id="car-4-9" class="charging not_charging">Test</td>
<td id="car-4-10" class="charging not_charging">Test</td>
<td id="car-4-11" class="charging not_charging">Test</td>
<td id="car-4-12" class="charging not_charging">Test</td>
<td id="car-4-13" class="charging not_charging">Test</td>
<td id="car-4-14" class="charging not_charging">Test</td>
<td id="car-4-15" class="charging not_charging">Test</td>
<td id="car-4-16" class="charging not_charging">Test</td>
<td id="car-4-exit-miles">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="car-5-7" class="charging not_charging">Test</td>
<td id="car-5-8" class="charging not_charging">Test</td>
<td id="car-5-9" class="charging not_charging">Test</td>
<td id="car-5-10" class="charging not_charging">Test</td>
<td id="car-5-11" class="charging not_charging">Test</td>
<td id="car-5-12" class="charging not_charging">Test</td>
<td id="car-5-13" class="charging not_charging">Test</td>
<td id="car-5-14" class="charging not_charging">Test</td>
<td id="car-5-15" class="charging not_charging">Test</td>
<td id="car-5-16" class="charging not_charging">Test</td>
<td id="car-5-exit-miles">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="car-6-7" class="charging not_charging">Test</td>
<td id="car-6-8" class="charging not_charging">Test</td>
<td id="car-6-9" class="charging not_charging">Test</td>
<td id="car-6-10" class="charging not_charging">Test</td>
<td id="car-6-11" class="charging not_charging">Test</td>
<td id="car-6-12" class="charging not_charging">Test</td>
<td id="car-6-13" class="charging not_charging">Test</td>
<td id="car-6-14" class="charging not_charging">Test</td>
<td id="car-6-15" class="charging not_charging">Test</td>
<td id="car-6-16" class="charging not_charging">Test</td>
<td id="car-6-exit-miles">60</td>
</tr>
</tbody>
</table>
澄清一下，我正在尝试找出这背后的功能。我已经在 HTML 中创建了 table，每个单元格都有自己的 ID。
我正在研究如何：检查休假时间与哪辆车有关，获取休假时间，将其四舍五入到最接近的时间，检查在休假时间之前需要充电多少小时。然后填充时间表，更改需要充电的电池的背景颜色。例如。汽车 1 需要充电 3 小时，12 点离开。时间表会显示汽车 1 行，8 - 0, 9 - 10, 10 - 11 单元格背景颜色已更改，出口里程栏显示汽车充电了多少英里.
我希望这能阐明我正在尝试做的事情。
编辑** 已设法将休假时间四舍五入，我使用的是数字，而不是分钟的时间。我有充电所需的小时数。
我现在正在研究如何 select 正确的 table 单元格，并更改该单元格的背景颜色，以及它后面需要更改的任何单元格。
如果有人有任何建议，或者至少可以指出正确的操作方向，或者可以使用的插件，我将非常感谢您的帮助。
我在这方面取得了一些进展，这是最新的fiddle：https://jsfiddle.net/Coxy/bv5jct7n/13/
当用户点击 generate 按钮时，您首先需要循环 first(charge) table 以使用 $(this).find.. 获取所需数据。现在，计算叶子得到 time 输入然后使用 split 获取数组中的时间，即：a[0] for hrs , a[1] for minutes 等等。然后，用 charge 减去它以获得所需的 leaves 。
现在，要将这些信息放入另一个 table 中，请再次使用 each 循环。但是，这里我们将使用 tr:eq('+count+') 遍历 tr > tds，这将一次循环一行。在这里面，我们需要使用 for 循环将 background-color 添加到所需的 td。我在代码中添加了注释，以便您了解其背后的逻辑。
演示代码 :
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
var regs = $(this).val().toUpperCase();
if ($(this).hasClass("reg")) {
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
if (cars_name.length > 0) {
$(this).closest("tr").find(".name").text(cars_name[0].values)
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
} else {
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});
$(".confirm").click(function() {
$("#table_id tbody tr").each(function() {
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the mtnc left")
}
})
});
$(".generate").click(function() {
var count = 0;//for second table
//remove any bg color in td
$("#table_id_2 tbody td").css({
"background-color": ""
});
//loop through first table to get datas
$("#table_id tbody tr").each(function() {
//get required datas
var car1_name = $(this).find(".name").text();
var mtnc = $(this).find(".mtnc").val();
var charges = $(this).find(".charge").text();
var times = $(this).find('.time').val();
//get hours i.e : 11:30 so take "11"
var hrs = times.split(":")[0];
//get leaves
var leaves = parseInt(hrs - charges);
//loop through second table starting from tr eq 0
$("#table_id_2 tbody tr:eq(" + count + ")").each(function() {
$(this).find("td:eq(0)").text(car1_name);//set car_name
//if hrs = 11 and leaves = 2 so loop from 11 -10-9-8..
for (var i = hrs; i >= leaves; i--) {
//add bg to that td
$(this).find("td[value=" + i + "]").css({
"background-color": "yellow"
});;
}
// add exit miles
$(this).find(".exit").text(mtnc)
});
count++;//increment to go to next tr
})
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});
.table {
border: 3px solid #000032;
width: 100%;
}
button {
padding: 10px;
border: none;
font: inherit;
color: white;
background-color: #000032;
margin: 5px;
}
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="table-section" class="table-section">
<div>
<button class="confirm">Confirm</button>
<button class="reset" type="reset">Reset Reg</button>
<table id="table_id" class="table">
<thead>
<tr>
<th id="th-reg">Registration</th>
<th id="th-name">Name</th>
<th id="th-cmr">Current Miles Range</th>
<th id="th-cni">Miles needed for next trip</th>
<th id="th-tl">Hours to charge for next trip</th>
<th id="tpoc">Time Leaving</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-1-name" class="name value-reset"></td>
<td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-1-charge-needed" class="charge"></td>
<td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-2-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-2-name" class="name"></td>
<td><span id="car-2-cmra" class="answer" type="number"></span><input id="car-2-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-2-mtnc" class="answer" type="number"></span><input id="car-2-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-2-charge-needed" class="charge"></td>
<td id="car-2-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-3-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-3-name" class="name"></td>
<td><span id="car-3-cmra" class="answer"></span><input id="car-3-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-3-mtnc" class="answer" type="number"></span><input id="car-3-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-3-charge-needed" class="charge"></td>
<td id="car-3-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-4-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-4-name" class="name"></td>
<td><span id="car-4-cmra" class="answer"></span><input id="car-4-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-4-mtnc" class="answer" type="number"></span><input id="car-4-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-4-charge-needed" class="charge"></td>
<td id="car-4-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-5-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-5-name" class="name"></td>
<td><span id="car-5-cmra" class="answer"></span><input id="car-5-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-5-mtnc" class="answer" type="number"></span><input id="car-5-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-5-charge-needed" class="charge"></td>
<td id="car-5-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-6-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-6-name" class="name"></td>
<td><span id="car-6-cmra" class="answer"></span><input id="car-6-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-6-mtnc" class="answer" type="number"></span><input id="car-6-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-6-charge-needed" class="charge"></td>
<td id="car-6-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
</tbody>
</table>
<button id="generate-time-table" class="generate">Generate Schedule</button>
</div>
</div>
<div id="schedule " class="schedule">
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7" value="7">7 - 8</th>
<th id="8" value="8">8 - 9</th>
<th id="9" value="9">9 - 10</th>
<th id="10" value="10">10 - 11</th>
<th id="11" value="11">11- 12</th>
<th id="12" value="12">12 -13</th>
<th id="13" value="13">13 - 14</th>
<th id="14" value="14">14 - 15</th>
<th id="15" value="15">15 - 16</th>
<th id="16" value="16">16 - 17</th>
<th id="exit_miles" class="exit">Exit Miles</th>
</tr>
</thead>
<tbody>
<!-- add attrr value to each td -->
<tr id="tr-car-1">
<td id="car-2">Car 1</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-1-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-2-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-3-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-4">Car 4</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-4-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-5-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-6-exit-miles" class="exit">60</td>
</tr>
</tbody>
</table>
</div>
注意 ：您输入的时间未验证 min 和 max 您需要使用jquery 这样用户就不会在该时间之后输入。