青青草一区,亚洲中午字幕,亚洲电影在线观看

本文介紹了根據用戶輸入、插入或構建創建每小時收費計劃?的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！

問題描述

我正在根據用戶輸入構建充電計劃以供我反思，但我糾結于是嘗試查找和調整插件還是自己構建.

該時間表是太陽能充電時間表，用于在上午 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.

這篇關于根據用戶輸入、插入或構建創建每小時收費計劃?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！

久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

根據用戶輸入、插入或構建創建每小時收費計劃

問題描述

相關文檔推薦