根据用户输入，插入或构建小时计费时间表? [英] Create a hourly charge schedule based off of user input, plug in or build?
本文介绍了根据用户输入，插入或构建小时计费时间表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在根据用户输入来制定计费时间表，以进行反思，并且坚持尝试尝试查找和改编插件还是自己构建.
该时间表是太阳能充电时间表，用于在上午7点至下午16点之间为电动汽车充电.一共有6辆汽车和6个太阳能充电器.
我建立了第一个表，用户在其中输入汽车登记信息，剩余里程数，下一次旅程所需的英里数以及他们离开该旅程所需的时间.
日程安排必须考虑到上述情况，然后生成收费时间表，以便为下一趟旅程的每辆车都充好电.
每辆车的最大续航里程为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还是很陌生，我觉得这超出了我的范围，我绝对需要与此相关的建议/帮助.
感谢您的时间.
<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创建了表格，每个单元格都有自己的ID.
我正在尝试如何:检查休假时间与哪辆车有关，获取休假时间，将其舍入到最近的小时，在休假时间之前检查需要充电多少小时.然后填充时间表，更改需要充电的电池的背景颜色.例如.汽车1需要充电3个小时，然后在12点离开.时间表将显示汽车1行，8-0、9-10、10-11个单元格的背景颜色已更改，出口里程列显示汽车已充电了多少英里
我希望这可以澄清我要做什么.
编辑**为了让请假时间四舍五入，我使用的是数字，而不是一时的时间.我有需要充电的小时数.
我现在正在研究如何选择正确的表格单元格，并更改该单元格及其后需要更改的所有单元格的背景色.
如果有人有任何建议，或者至少可以向我指出正确的做法，或者可以使用一个插件，我将非常感谢您的帮助.
我在此方面取得了一些进步，这是最新的小提琴: https://jsfiddle.net/Coxy/bv5jct7n/13/
解决方案
当用户单击generate按钮时，您首先需要遍历first(charge)表以使用$(this).find..获取所需数据.获取time输入，然后使用split获取数组中的时间，即: a [0] for hrs ， a [1] 持续分钟等，然后用charge减去以得到必需的叶子.
现在，要将这些信息放入另一个表中，请再次使用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对其进行验证，以便用户在该时间之后不会输入. /p>
I am building a charge schedule off of the user input for my reflection and I am stuck on whether to try find and adapt a plug in, or build it myself.
The schedule is a solar charge schedule to charge electric cars between the hours of 7am and 16pm. There are 6 cars and 6 solar chargers.
I have built the first table where the user inputs the car registration, the amount of miles left, the amount of miles needed for the next journey and the time they need to leave for that journey.
The schedule must take in to account the above and then generate a charge time table so each car is sufficiently charged for the next journey.
Each car has a maximum range of 250 miles and the cars charge at 44 miles per hour.
Here is the JSFiddle with the whole project: 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() {
})
Here is an example I have been given that will hopefully help explain what I mean.
I have looked on Stack and can't seem a similar question, and I have looked for plug ins that may (with some adapting) be able to do this but haven't found any I think will work.
Any ideas or pointers would be really be appreciated, I am quite new to JS and this I feel is a bit beyond my scope and I definitely need advice/help with this.
Thanks for your time.
<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>
To clarify I am trying to work out the functionality behind this. I have the table created in HTML already, with each cell having it's own id.
I am trying to work out how to: Check which car the leave time relates to, get the leave time, round it to the nearest hour, check how many hours charge it needs before the leave time. Then populate the schedule changing the background colour of the cells that are needed to charge. For example. Car 1 needs to charge for 3 hours and leaves at 12. The schedule would show car 1 row, 8 - 0, 9 - 10, 10 - 11 cells background colour has changed, the exit miles column shows how many miles charge the car has.
I hope this clarifies what I am trying to do.
Edit** Have manged to get the leave time rounded up or down, I am using numbers, not time at the minute. I have the amount of hours needed for charge.
I am now working on how to select the right table cell, and change the back ground colour for that cell, and any cells following it that need changing.
If anyone has any advice, or can at least point me in the right direction of how to do it, or a plug in to use I'd really appreciate the help.
I have made a few advancements on this, and this is the latest fiddle: https://jsfiddle.net/Coxy/bv5jct7n/13/
解决方案
When user click on generate button you first need to loop through first(charge) table to get required data using $(this).find.. .Now , to calculate leaves get time input then use split to get the time in array i.e : a[0] for hrs , a[1] for minutes and so on .Then , subtract it with charge to get required leaves .
Now, to put these info inside another table use each loop again . But , here we will loop through tr > tds using tr:eq('+count+') which will loop one row at a time . Inside this we will need to use for loop to add background-color to required td. I have added comments in code so you can understand logic behind it .
Demo code :
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>
Note : Your time input is not validating min and max you need to validate it using jquery so that user do not input beyond that time.
这篇关于根据用户输入，插入或构建小时计费时间表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
