沃梦达 / 编程问答 / 前端问题 / 正文

根据用户输入、插入或构建创建每小时收费计划

前端问题
2022-01-01

Create a hourly charge schedule based off of user input, plug in or build?(根据用户输入、插入或构建创建每小时收费计划?)

本文介绍了根据用户输入、插入或构建创建每小时收费计划?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在根据用户输入构建充电计划以供我反思，但我纠结于是尝试查找和调整插件还是自己构建.

该时间表是太阳能充电时间表，用于在上午 7 点至下午 16 点之间为电动汽车充电.有6辆汽车和6个太阳能充电器.

我已经建立了第一个表格，用户可以在其中输入汽车注册信息、剩余里程数、下一次旅程所需的里程数以及他们需要离开该旅程的时间.

时间表必须考虑到上述情况，然后生成一个充电时间表，以便每辆车都为下一次旅程充电.

每辆车的最大续航里程为 250 英里，充电速度为每小时 44 英里.

这是整个项目的 JSFiddle:

我查看了 Stack 并且似乎没有类似的问题，并且我已经寻找可能(经过一些调整)能够做到这一点但没有找到任何我认为可以工作的插件.

任何想法或指针都将不胜感激，我对 JS 很陌生，我觉得这有点超出了我的范围，我绝对需要建议/帮助.

感谢您的宝贵时间.

 <table id=table_id_2"类=表"><头><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">退出里程</th></tr></头><身体><tr><td id=car-1">汽车 1</td><td id=car-1-7";class="charge not_charging">测试</td><td id=car-1-8";class="charge not_charging">测试</td><td id=car-1-9";class="charge not_charging">测试</td><td id=car-1-10";class="charge not_charging">测试</td><td id=car-1-11";class="charge not_charging">测试</td><td id=car-1-12";class="charge not_charging">测试</td><td id=car-1-13";class="charge not_charging">测试</td><td id=car-1-14";class="charge not_charging">测试</td><td id=car-1-15";class="charge not_charging">测试</td><td id=car-1-16";class="charge not_charging">测试</td><td id=car-1-exit-miles">60</td></tr><tr><td id=car-2">汽车 2</td><td id=car-2-7";class="charge not_charging">测试</td><td id=car-2-8";class="charge not_charging">测试</td><td id=car-2-9";class="charge not_charging">测试</td><td id =car-2-10";class="charge not_charging">测试</td><td id=car-2-11";class="charge not_charging">测试</td><td id=car-2-12";class="charge not_charging">测试</td><td id=car-2-13";class="charge not_charging">测试</td><td id=car-2-14";class="charge not_charging">测试</td><td id=car-2-15";class="charge not_charging">测试</td><td id=car-2-16";class="charge not_charging">测试</td><td id=car-2-exit-miles">60</td></tr><tr><td id=car-3">汽车 3</td><td id=car-3-7";class="charge not_charging">测试</td><td id=car-3-8";class="charge not_charging">测试</td><td id=car-3-9";class="charge not_charging">测试</td><td id=car-3-10";class="charge not_charging">测试</td><td id=car-3-13";class="charge not_charging">测试</td><td id=car-3-12";class="charge not_charging">测试</td><td id=car-3-13";class="charge not_charging">测试</td><td id=car-3-14";class="charge not_charging">测试</td><td id=car-3-15";class="charge not_charging">测试</td><td id =car-3-16";class="charge not_charging">测试</td><td id=car-3-exit-miles">60</td></tr><tr><td id=car-4";>4号车</td><td id=car-4-7";class="charge not_charging">测试</td><td id=car-4-8";class="charge not_charging">测试</td><td id=car-4-9";class="charge not_charging">测试</td><td id=car-4-10";class="charge not_charging">测试</td><td id=car-4-11";class="charge not_charging">测试</td><td id=car-4-12";class="charge not_charging">测试</td><td id=car-4-13";class="charge not_charging">测试</td><td id=car-4-14";class="charge not_charging">测试</td><td id=car-4-15";class="charge not_charging">测试</td><td id=car-4-16";class="charge not_charging">测试</td><td id=car-4-exit-miles">60</td></tr><tr><td id=car-5">汽车 5</td><td id=car-5-7";class="charge not_charging">测试</td><td id=car-5-8";class="charge not_charging">测试</td><td id=car-5-9";class="charge not_charging">测试</td><td id =car-5-10";class="charge not_charging">测试</td><td id=car-5-11";class="charge not_charging">测试</td><td id=car-5-12";class="charge not_charging">测试</td><td id=car-5-13";class="charge not_charging">测试</td><td id=car-5-14";class="charge not_charging">测试</td><td id =car-5-15";class="charge not_charging">测试</td><td id=car-5-16";class="charge not_charging">测试</td><td id=car-5-exit-miles">60</td></tr><tr><td id=car-6">汽车 6</td><td id=car-6-7";class="charge not_charging">测试</td><td id=car-6-8";class="charge not_charging">测试</td><td id=car-6-9";class="charge not_charging">测试</td><td id=car-6-10";class="charge not_charging">测试</td><td id=car-6-11";class="charge not_charging">测试</td><td id=car-6-12";class="charge not_charging">测试</td><td id=car-6-13";class="charge not_charging">测试</td><td id=car-6-14";class="charge not_charging">测试</td><td id =car-6-15";class="charge not_charging">测试</td><td id=car-6-16";class="charge not_charging">测试</td><td id="car-6-exit-miles">60</td></tr></tbody></表>

为了澄清我正在尝试解决这背后的功能.我已经在 HTML 中创建了表格，每个单元格都有自己的 ID.

我正在尝试如何:检查休假时间与哪辆车相关，获取休假时间，将其四舍五入到最接近的小时，检查在休假时间之前需要充电多少小时.然后填充时间表，更改需要充电的单元格的背景颜色.例如.汽车 1 需要充电 3 小时，12 点离开.时间表会显示汽车 1 行，8 - 0、9 - 10、10 - 11 单元格背景颜色已更改，出口里程列显示汽车已充电多少英里.

我希望这能阐明我想要做什么.

编辑** 已经设法将休假时间向上或向下取整，我使用的是数字，而不是一分钟的时间.我有充电所需的小时数.

我现在正在研究如何选择正确的表格单元格，并更改该单元格的背景颜色，以及它后面需要更改的任何单元格.

如果有人有任何建议，或者至少可以为我指出正确的操作方向，或者使用插件，我将非常感谢您的帮助.

我在这方面做了一些改进，这是最新的小提琴:https://jsfiddle.net/Coxy/bv5jct7n/13/

解决方案

当用户点击 generate 按钮时，您首先需要遍历 first(charge) table 以使用 $ 获取所需数据(this).find.. .现在，要计算树叶，请获取 time 输入，然后使用 split 获取数组中的时间，即:a[0] 表示 hrs ， a[1] 表示 minutes 等等.然后，用 charge 获取所需的叶子.

现在，要将这些信息放入另一个表中，请再次使用 each 循环.但是，这里我们将遍历 tr >tds 使用 tr:eq('+count+') 将循环一行一次.在这个内部，我们需要使用 for 循环将 background-color 添加到所需的 td.我在代码中添加了注释，以便您了解其背后的逻辑.

演示代码:

var regss = [{"名称": "NP60UQQ",价值观":小白"},{名称":NP60UQS"，价值观":小灰"},{名称":NP60UQT"，价值观":探戈"},{"名称": "NP60UQU",价值观":甘道夫"},{名称":NP60UQV"，价值观":水色"},{名称":NP60UQW"，价值观":大红"}]$(文档).ready(函数() {$('#table_id').DataTable();});$('#table_id').DataTable({分页:假，搜索:假，选择:真});$("input[type='text']").change(function() {var regs = $(this).val().toUpperCase();if ($(this).hasClass("reg")) {var car_name = $(regss).filter(函数(i, n) {返回 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();} 别的 {$(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("");$("输入").show();});$(".confirm").click(function() {$("#table_id tbody tr").each(function() {if ($(this).find(".reg").val() == "") {$(this).find(".name").text("请输入有效的注册信息")}var cmra = $(this).find(".cmr").val()var mtnc = $(this).find(".mtnc").val()if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {var 英里 = Math.ceil((parseInt(mtnc - cmra))/44);$(this).find(".charge").text(miles)} else if (cmra == null || cmra == "") {$(this).find(".charge").text("请输入当前剩余里程")} else if (mtnc == null || mtnc == "") {$(this).find(".charge").text("请输入mtnc左边")}})});$(".generate").click(function() {var count = 0;//第二个表//删除td中的任何bg颜色$("#table_id_2 tbody td").css({背景颜色": ""});//遍历第一个表以获取数据$("#table_id tbody tr").each(function() {//获取需要的数据var car1_name = $(this).find(".name").text();var mtnc = $(this).find(".mtnc").val();var 费用 = $(this).find(".charge").text();var times = $(this).find('.time').val();//获取时间，即:11:30 所以取11"var hrs = times.split(":")[0];//获取叶子var 叶子 = parseInt(hrs - 费用);//循环从 tr eq 0 开始的第二个表$("#table_id_2 tbody tr:eq(" + count + ")").each(function() {$(this).find("td:eq(0)").text(car1_name);//设置car_name//如果 hrs = 11 并且叶子 = 2 所以从 11 -10-9-8 循环..for (var i = hrs; i >= 叶; i--) {//将bg添加到该td$(this).find("td[value=" + i + "]").css({背景色":黄色"});;}//添加出口里程$(this).find(".exit").text(mtnc)});count++;//递增到下一个tr})});$(".reset").click(function() {$(".answer").html("");$("输入").show();});

.table {边框:3px 实心#000032；宽度:100%；}按钮 {填充:10px；边框:无；字体:继承；白颜色;背景颜色:#000032；边距:5px；}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></脚本><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">
<button class="confirm">确认</button><button class="reset" type="reset">重置注册</button><table id="table_id" class="table"><头><tr><th id="th-reg">注册</th><th id="th-name">姓名</th><th id="th-cmr">当前里程范围</th><th id="th-cni">下次旅行所需里程</th><th id="th-tl">下一次旅行的收费小时数</th><th id="tpoc">时间离开</th></tr></头><身体><tr><td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter注册"></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="输入剩余里程"></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="输入所需里程"></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" 必填></input></td></tr><tr><td><span class="answer"></span><input id="car-2-reg" class="reg" type="text" value="" placeholder="输入注册"></输入></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="输入剩余里程"></input></td><td><span id="car-2-mtnc" class="answer" type="number"></span><input id="car-2-mtnc" class="mtnc"type="text" value="" placeholder="输入所需里程"></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" 需要></input></td></tr><tr><td><span class="answer"></span><input id="car-3-reg" class="reg" type="text" value="" placeholder="输入注册"></输入></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="输入剩余里程"></input></td><td><span id="car-3-mtnc" class="answer" type="number"></span><input id="car-3-mtnc" class="mtnc"type="text" value="" placeholder="输入所需里程"></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" 需要></input></td></tr><tr><td><span class="answer"></span><input id="car-4-reg" class="reg" type="text" value="" placeholder="输入注册"></输入></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="输入剩余里程"></input></td><td><span id="car-4-mtnc" class="answer" type="number"></span><input id="car-4-mtnc" class="mtnc"type="text" value="" placeholder="输入所需里程"></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" 需要></input></td></tr><tr><td><span class="answer"></span><input id="car-5-reg" class="reg" type="text" value="" placeholder="输入注册"></输入></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="输入剩余里程"></input></td><td><span id="car-5-mtnc" class="answer" type="number"></span><input id="car-5-mtnc" class="mtnc"type="text" value="" placeholder="输入所需里程"></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" 需要></input></td></tr><tr><td><span class="answer"></span><input id="car-6-reg" class="reg" type="text" value="" placeholder="输入注册"></输入></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="输入剩余里程"></input></td><td><span id="car-6-mtnc" class="answer" type="number"></span><input id="car-6-mtnc" class="mtnc"type="text" value="" placeholder="输入所需里程"></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" 需要></input></td></tr></tbody></表><button id="generate-time-table" class="generate">生成时间表</button></div></div><div id="schedule" class="schedule"><table id="table_id_2" class="table"><头><tr><th id="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">退出里程</th></tr></头><身体><!-- 为每个 td 添加 attrr 值 --><tr id="tr-car-1"><td id="car-2">汽车 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">汽车 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">汽车 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">汽车 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">汽车 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">汽车 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></表></div>

注意:您的时间输入没有验证 min 和 max 您需要使用 jquery 验证它所以该用户在该时间之后不会输入.

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.

这篇关于根据用户输入、插入或构建创建每小时收费计划?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：根据用户输入、插入或构建创建每小时收费计划

上一篇： 生成 XML 的 Jgrid 问题
下一篇： ImagesLoaded with Masonry, Object #&lt;Object&gt;没有

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2