Расписание обновлений отображается на основе нового обновленного arrayjQuery

ProgramBox

Расписание обновлений отображается на основе нового обновленного arrayjQuery

Post author:admin
Запись опубликована:5 августа, 2022
Post category:Вопросы по программированию

#jquery #arrays #callback

#jquery #массивы #обратный вызов

Вопрос:

Я нахожусь на полпути к проекту, в котором мне нужно отобразить график начислений на основе ряда переменных, вводимых пользователем.

Я получил все данные и обновил массив на основе номера приоритета, рассчитанного на основе данных.

У меня возникли проблемы с использованием обновленного массива для создания расписания.

Приведенный ниже код представляет ту часть, которая, по моему мнению, должна идти.

 
Updated array =  "regss_sorted"

reggs_sorted;

  //loop through second table starting from tr eq 0
       $("#table_id_2 tbody tr:eq("   count   ")").each(function() {
        //  start based on sorted prioirty 
        
        
        $(this).find("td:eq(0)").text(car1_name);//set car_name
  //if hrs = 11 and leaves = 2 so loop from 11 -10-9-8..
  // add conditonal here for solar will need help writing this. 
        for (var i = hrs; i >= leaves; i--) {
        //add bg to that td
          $(this).find("td[value="   i   "]").css({
            "background-color": "#00417b"
          });;

        // add exit miles 
        $(this).find(".exit").text(mtnc)
      }
      });
      count  ;//increment to go to next tr 
    });
  });

я перепробовал много разных способов и посмотрел на Stack, но я не могу найти ответ или даже аналогичный вопрос. Любая помощь будет оценена.

Полная скрипка найдена здесь: обновленная скрипка с исправлением ошибки для отображения правильного номера приоритета https://jsfiddle.net/Coxy/184vysjp/2 /

1. Привет, пожалуйста, не могли бы вы подробнее рассказать о своей проблеме?

2. Привет, Свати, так что у меня есть все входные данные, которые вводит пользователь, например. Автомобиль 1,2,3 рег., оставшиеся мили, необходимые мили, время зарядки и время отпуска. Когда вы нажимаете подтвердить, мне нужно изменить порядок их представления в расписании начислений на основе номера приоритета (который я рассчитал на основе пользовательского ввода). Итак, если care 3 имеет приоритет 1, а car 1 и 2 имеют приоритет 2, то сначала отображается car 3, а затем остальные. Помогает ли это calrify?

3. Я понял, что вы пытаетесь сделать, но нужно ли заполнять все значения данных строки? затем нажмите «Создать»?

4. Не все строки, только те, которые нужны пользователю. Представьте, что это служба такси, и менеджеру нужно, чтобы все автомобили были заряжены на следующий день. Это то, что меня попросили создать. Я думал, что оригинал был достаточно хорош, так как все машины были заряжены вовремя. Но они запросили приоритетный порядок. Как только я завершу этот раздел, мне нужно будет учесть скорость зарядки солнечной панели.. О, радость, лол.

5. итак reggs_sorted , теперь все ваши данные дают правильное значение, просто вам нужно добавить их, я прав?

Ответ №1:

Вы можете перебирать данные первой таблицы и добавлять эти значения в отдельный массив JSON, а затем применять функцию сортировки к этим данным. После сортировки вам нужно выполнить цикл сортировки данных и внутри этого цикла через вашу вторую таблицу, затем получить значения из отсортированного массива и добавить их в required tds .

Демонстрационный код :

 var regss = [{
    "name": "NP60UQQ",
    "values": "Little White",
    "KwPh": 11
  },
  {
    "name": "NP60UQS",
    "values": "Little Blue",
    "KwPh": 11

  },
  {
    "name": "NP60UQT",
    "values": "The Tango",
    "KwPh": 11

  },
  {
    "name": "NP60UQU",
    "values": "The Gandalf",
    "KwPh": 11
  },
  {
    "name": "NP60UQV",
    "values": "Aqua",
    "KwPh": 11
  },
  {
    "name": "NP60UQW",
    "values": "Big Red",
    "KwPh": 11
  }
]


$(document).ready(function() {
  $('#table_id').DataTable();
});

$('#table_id').DataTable({
  paging: false,
  searching: false,
  select: true
});


$("select").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() {
  var time = $(this).val().split(":")[0]; //get hrs
  if ((time >= 7) amp;amp; (time <= 16)) {
    $(this).closest('td').find("span").show().text($(this).val());
    $(this).hide();
  } else {
    //show error 
    alert("Please enter time below 16:00 and greater the 07:00");
  }
});


$(".reset").click(function() {
  $(".answer").html("");
  $("input").show();
  $("select").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 amp;amp; cmra != "") amp;amp; (mtnc != null amp;amp; mtnc != "")) {
      var miles = Math.ceil(parseInt(((mtnc - cmra)   (mtnc - cmra / 10)) / 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 mile to next charge");
    }
  })
});

// generate schedule 
$(".generate").click(function() {
  $("#table_id_2 tbody td").css({
    "background-color": ""
  });

  var new_array = []; //declare this
  $("#table_id tbody tr").each(function(index) {
    var obj = {} //create object
    var car1_name = $(this).find(".name").text();
    var mtnc = $(this).find(".mtnc").val();
    var charges = $(this).find(".charge").text();
    var time_l = $(this).find('.time-c').val();
    var times = $(this).find('.time').val();
    var hrs_1 = time_l.split(":")[0] - 1;
    var hrs = times.split(":")[0] - 1;
    var leaves = parseInt(hrs - charges);

    var time_available = parseInt(hrs - hrs_1);
    var priority = parseInt(time_available / charges);
    //get all values passed in new arrays
    obj["car_name"] = car1_name
    obj["mtnc"] = mtnc
    obj["hrs"] = hrs
    obj["times"] = leaves
    obj["priority"] = priority;
    obj["leaves"] = times;
    new_array.push(obj)
  });
  //sort new arrays..
  new_array.sort(function(a, b) {
    var x = parseInt(a["priority"]);
    var y = parseInt(b["priority"]);
    if (x != y) {
      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    } else {
      var m = parseInt(a["leaves"]);
      var n = parseInt(b["leaves"]);
      return ((m < n) ? -1 : ((m > n) ? 1 : 0));
    }

  });
  console.log(new_array)
  //loop through sorted array
  $(new_array).each(function(index, value) {
    $("#table_id_2 tbody tr:eq("   index   ")").each(function() {
      //add values to required tds..
      $(this).find("td:eq(0)").text(value.car_name);
      for (var i = value.hrs; i >= value.times; i--) {
        //add bg to that td
        $(this).find("td[value="   i   "]").css({
          "background-color": "#00417b"
        });;
      }
      $(this).find(".exit").text(value.mtnc)
    });
  })
});

 <div class="content-container">
  <div id="table-section" class="table-section">
    <div>

      <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 put on Charge</th>
            <th id="tpoc">Time Leaving</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-2-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-3-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-4-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-5-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
          <tr>
            <td><span class="answer"></span>
              <select class="reg dropdown" type="text" value="" placeholder="Enter Registration">
                <option>NP60UQQ</option>
                <option>NP60UQS</option>
                <option>NP60UQT</option>
                <option>NP60UQU</option>
                <option>NP60UQV</option>
                <option>NP60UQW</option>
              </select>
            </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-tpom" class="toc"><span class="answer time-input" type="text"></span><input class="time-c" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>
            <td id="car-6-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input>
            </td>

          </tr>
        </tbody>

      </table>

      <div class="schedule-text">
        <!-- <span>
                                        <p>Once the correct details have been entered hit CONFIRM to confirm the details,<br>
                                        if you make a mistake, OR need to CHANGE the LEAVING TIME hit the RESET button.
                                        </p>
                                    </span> -->
        <button class="reset" type="reset">Reset</button>
        <button class="confirm">Confirm</button>
      </div>


    </div>

    <div id="schedule " class="schedule">
      <div class="schedule-text">
        <span><p>Once you have CONFIRMED the details hit GENERATE to see the charge schedule</p></span>
        <button id="generate-time-table" class="generate">Generate Schedule</button>
      </div>
      <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>
            <td id="car-1">Car 1</td>
            <td id="car-1-7" value="7"></td>
            <td id="car-1-8" value="8"></td>
            <td id="car-1-9" value="9"></td>
            <td id="car-1-10" value="10"></td>
            <td id="car-1-11" value="11"></td>
            <td id="car-1-12" value="12"></td>
            <td id="car-1-13" value="13"></td>
            <td id="car-1-14" value="14"></td>
            <td id="car-1-15" value="15"></td>
            <td id="car-1-16" value="16"></td>
            <td id="car-1-exit-miles" class="exit"></td>
          </tr>

          <tr>
            <td id="car-2">Car 2</td>
            <td id="car-2-7" value="7"></td>
            <td id="car-2-8" value="8"></td>
            <td id="car-2-9" value="9"></td>
            <td id="car-2-10" value="10"></td>
            <td id="car-2-11" value="11"></td>
            <td id="car-2-12" value="12"></td>
            <td id="car-2-13" value="13"></td>
            <td id="car-2-14" value="14"></td>
            <td id="car-2-15" value="15"></td>
            <td id="car-2-16" value="16"></td>
            <td id="car-2-exit-miles" class="exit"></td>
          </tr>

          <tr>
            <td id="car-3">Car 3</td>
            <td id="car-3-7" value="7"></td>
            <td id="car-3-8" value="8"></td>
            <td id="car-3-9" value="9"></td>
            <td id="car-3-10" value="10"></td>
            <td id="car-3-11" value="11"></td>
            <td id="car-3-12" value="12"></td>
            <td id="car-3-13" value="13"></td>
            <td id="car-3-14" value="14"></td>
            <td id="car-3-15" value="15"></td>
            <td id="car-3-16" value="16"></td>
            <td id="car-3-exit-miles" class="exit"></td>
          </tr>

          <tr>
            <td id="car-4">Car 4</td>
            <td id="car-4-7" value="7"></td>
            <td id="car-4-8" value="8"></td>
            <td id="car-4-9" value="9"></td>
            <td id="car-4-10" value="10"></td>
            <td id="car-4-11" value="11"></td>
            <td id="car-4-12" value="12"></td>
            <td id="car-4-13" value="13"></td>
            <td id="car-4-14" value="14"></td>
            <td id="car-4-15" value="15"></td>
            <td id="car-4-16" value="16"></td>
            <td id="car-4-exit-miles" class="exit"></td>
          </tr>

          <tr>
            <td id="car-5">Car 5</td>
            <td id="car-5-7" value="7"></td>
            <td id="car-5-8" value="8"></td>
            <td id="car-5-9" value="9"></td>
            <td id="car-5-10" value="10"></td>
            <td id="car-5-11" value="11"></td>
            <td id="car-5-12" value="12"></td>
            <td id="car-5-13" value="13"></td>
            <td id="car-5-14" value="14"></td>
            <td id="car-5-15" value="15"></td>
            <td id="car-5-16" value="16"></td>
            <td id="car-5-exit-miles" class="exit"></td>
          </tr>

          <tr>
            <td id="car-6">Car 6</td>
            <td id="car-6-7" value="7"></td>
            <td id="car-6-8" value="8"></td>
            <td id="car-6-9" value="9"></td>
            <td id="car-6-10" value="10"></td>
            <td id="car-6-11" value="11"></td>
            <td id="car-6-12" value="12"></td>
            <td id="car-6-13" value="13"></td>
            <td id="car-6-14" value="14"></td>
            <td id="car-6-15" value="15"></td>
            <td id="car-6-16" value="16"></td>
            <td id="car-6-exit-miles" class="exit"></td>
          </tr>
        </tbody>

      </table>
    </div>

    <!-- Scripts-->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <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>

Развернуть фрагмент