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

Question

我正在为我的反射从用户输入建立一个收费时间表，我被困在是尝试找到和调整插件，还是自己构建它。

这个时间表是一个太阳能充电时间表，在早上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。

我正在努力想办法:检查休假时间与哪一辆车有关，得到休假时间，把它整到最近的时间，检查休假前它需要多少小时的费用。然后填充时间表，改变需要充电的单元格的背景颜色。例如。Car 1需要充电3小时，12点离开。时间表显示汽车1排、8- 0、9- 10、10 - 11单元的背景颜色发生了变化，出口里程列显示了汽车的充电里程。

我希望这能澄清我想要做的事情。

编辑**已经整理好了休假时间，我使用的是数字，而不是分钟。我有收费所需的时数。

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

如果有人有任何建议，或者至少可以为我指出正确的方向，如何去做，或者插上一个插件来使用，我会非常感谢你的帮助。

我已经在这方面取得了一些进展，这是最新的小提琴：https://jsfiddle.net/Coxy/bv5jct7n/13/

Answer 1

当用户单击generate按钮时，首先需要遍历第一个(收费)表，使用$(this).find.. .Now获得所需的数据，然后计算叶获取time输入，然后使用split获取数组中的时间。例如：a，小时，a1，分钟.Then，用charge减去它得到所需的离开E 210。

现在，要将这些信息放入另一个表中，请再次使用each循环。但是，在这里，我们将使用tr > tds循环使用tr:eq('+count+')，这将一次循环一行。在这里面，我们需要使用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验证它，这样用户就不会在该时间之后进行输入。