jquery - 基于新更新的数组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 但我找不到答案，甚至找不到类似的问题。任何帮助，将不胜感激。
在这里找到完整的小提琴：更新了 Fiddle 并修复了错误以显示正确的优先级编号https://jsfiddle.net/Coxy/184vysjp/2/
解决方案
您可以遍历您的第一个表数据并将该值添加到单独的JSON 数组中，然后对该数据应用排序功能。排序后，您需要遍历排序数据并在此循环中遍历第二个表，然后从排序数组中获取值并将其添加到 requiredtds中。
演示代码：
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) && (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 && cmra != "") && (mtnc != null && 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>推荐阅读
- react-native - React 原生 pell 富文本编辑器
- python - Pygame在一个文件中导入，但在同一文件夹中的其他文件中找不到？
- javascript - 是否可以在 JEST 中测试方法的特定部分以检查特定结果
- php - 我需要通过 echo 在元数据之间留出空间
- c# - 删除用户控件及其所有子控件
- c# - Xamarin 应用程序未使用 AndroidManifest.xml 默认代码运行
- xamarin.forms - 使指南针始终指向 Xamarin 表单中的特定位置
- terminal - Visual Studio 代码：以退出代码终止：3221225477
- r - 如何将一列数据附加到R中的多列
- android - 如何在意图android中传递2个文件