如何解决将任何变量移到表中的任何位置
我对JavaScript还是很陌生，并试图提高我的基本技能。我已经建立了一个简单的表格，您可以在其中输入汽车登记信息，然后弹出汽车名称，输入左侧的英里数和所需的英里数，并计算出需要充电的小时数。
当前，您必须在第一行中输入car 1 reg号，在第二行中输入car 2，在第二行中输入car 3，并想知道是否有一种方法可以重写if语句，以便您可以键入任何一辆车reg，但仍然可以提取正确的汽车名称。
我试着将汽车规则库放入一个数组中，并调用该数组进行检查（var仍然存在），但我无法使其正常工作。
这是JSFiddle上的完整代码：https://jsfiddle.net/Coxy/1r30xgjc/1/
以下是if语句：
// Getting name based on registration
var car1 = "Little White";
var car2 = "Little Grey";
var car3 = "The Tango";
var car4 = "The Gandalf";
var car5 = "Aqua";
var car6 = "Big Red";
var car_1_reg = "NP60UQQ";
var car_2_reg = "NP60UQS";
var car_3_reg = "NP60UQT";
var car_4_reg = "NP60UQU";
var car_5_reg = "NP60UQV";
var car_6_reg = "NP60UQW";
var reg = [car_1_reg,car_2_reg,car_3_reg,car_4_reg,car_5_reg,car_6_reg];
var car_name_1 = document.getElementById('car-1-name');
var car_1_charge = document.getElementById('car-1-charge-needed');
$(".confirm").click(function() {
var car_reg_1 = $("#car-1-reg").val();
var a = parseInt(document.getElementById('car-1-cmra').textContent,10);
var b = parseInt(document.getElementById('car-1-mtnc').textContent,10);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_1 != car_1_reg) {
car_name_1.innerText = 'Not a valid Registration';
car_1_charge.textContent = "Please enter a valid registration";
} else if (car_reg_1 = car_1_reg && ( isNaN(a) )) {
car_name_1.textContent = car1;
car_1_charge.textContent = "Please enter the current miles left";
} else if (car_reg_1 = car_1_reg && ( isNaN(b) )) {
car_name_1.textContent = car1;
car_1_charge.textContent = "Please enter the miles needed";
} else {
car_name_1.textContent = car1;
car_1_charge.textContent = miles;
}
});
var car_name_2 = document.getElementById('car-2-name');
var car_2_charge = document.getElementById('car-2-charge-needed');
$(".confirm").click(function() {
var car_reg_2 = $("#car-2-reg").val();
var a = parseInt(document.getElementById('car-2-cmra').textContent,20);
var b = parseInt(document.getElementById('car-2-mtnc').textContent,20);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_2 != car_2_reg) {
car_name_2.innerText = 'Not a valid Registration';
car_2_charge.textContent = "Please enter a valid registration";
} else if (car_reg_2 = car_2_reg && ( isNaN(a) )) {
car_name_2.textContent = car2;
car_2_charge.textContent = "Please enter the current miles left";
} else if (car_reg_2 = car_2_reg && ( isNaN(b) )) {
car_name_2.textContent = car2;
car_2_charge.textContent = "Please enter the miles needed";
} else {
car_name_2.textContent = car2;
car_2_charge.textContent = miles;
}
});
var car_name_3 = document.getElementById('car-3-name');
var car_3_charge = document.getElementById('car-3-charge-needed');
$(".confirm").click(function() {
var car_reg_3 = $("#car-3-reg").val();
var a = parseInt(document.getElementById('car-3-cmra').textContent,30);
var b = parseInt(document.getElementById('car-3-mtnc').textContent,30);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_3 != car_3_reg) {
car_name_3.innerText = 'Not a valid Registration';
car_3_charge.textContent = "Please enter a valid registration";
} else if (car_reg_3 = car_3_reg && ( isNaN(a) )) {
car_name_3.textContent = car3;
car_3_charge.textContent = "Please enter the current miles left";
} else if (car_reg_3 = car_3_reg && ( isNaN(b) )) {
car_name_3.textContent = car3;
car_3_charge.textContent = "Please enter the miles needed";
} else {
car_name_3.textContent = car3;
car_3_charge.textContent = miles;
}
});
var car_name_4 = document.getElementById('car-4-name');
var car_4_charge = document.getElementById('car-4-charge-needed');
$(".confirm").click(function() {
var car_reg_4 = $("#car-4-reg").val();
var a = parseInt(document.getElementById('car-4-cmra').textContent,40);
var b = parseInt(document.getElementById('car-4-mtnc').textContent,40);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_4 != car_4_reg) {
car_name_4.innerText = 'Not a valid Registration';
car_4_charge.textContent = "Please enter a valid registration";
} else if (car_reg_4 = car_4_reg && ( isNaN(a) )) {
car_name_4.textContent = car4;
car_4_charge.textContent = "Please enter the current miles left";
} else if (car_reg_4 = car_4_reg && ( isNaN(b) )) {
car_name_4.textContent = car4;
car_4_charge.textContent = "Please enter the miles needed";
} else {
car_name_4.textContent = car4;
car_4_charge.textContent = miles;
}
});
var car_name_5 = document.getElementById('car-5-name');
var car_5_charge = document.getElementById('car-5-charge-needed');
$(".confirm").click(function() {
var car_reg_5 = $("#car-5-reg").val();
var a = parseInt(document.getElementById('car-5-cmra').textContent,50);
var b = parseInt(document.getElementById('car-5-mtnc').textContent,50);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_5 != car_5_reg) {
car_name_5.innerText = 'Not a valid Registration';
car_5_charge.textContent = "Please enter a valid registration";
} else if (car_reg_5 = car_5_reg && ( isNaN(a) )) {
car_name_5.textContent = car5;
car_5_charge.textContent = "Please enter the current miles left";
} else if (car_reg_5 = car_5_reg && ( isNaN(b) )) {
car_name_5.textContent = car5;
car_5_charge.textContent = "Please enter the miles needed";
} else {
car_name_5.textContent = car5;
car_5_charge.textContent = miles;
}
});
var car_name_6 = document.getElementById('car-6-name');
var car_6_charge = document.getElementById('car-6-charge-needed');
$(".confirm").click(function() {
var car_reg_6 = $("#car-6-reg").val();
var a = parseInt(document.getElementById('car-6-cmra').textContent,60);
var b = parseInt(document.getElementById('car-6-mtnc').textContent,60);
var miles = Math.ceil((b - a) / 44);
console.log(miles)
if (car_reg_6 != car_6_reg) {
car_name_6.innerText = 'Not a valid Registration';
car_6_charge.textContent = "Please enter a valid registration";
} else if (car_reg_6 = car_6_reg && ( isNaN(a) )) {
car_name_6.textContent = car6;
car_6_charge.textContent = "Please enter the current miles left";
} else if (car_reg_6 = car_6_reg && ( isNaN(b) )) {
car_name_6.textContent = car6;
car_6_charge.textContent = "Please enter the miles needed";
} else {
car_name_6.textContent = car6;
car_6_charge.textContent = miles;
}
});
如您所见，它包含很多代码，我确定必须有一种方法可以使它满足我的需要，并且更短？
最终结果是根据用户提交的信息生成时间表的收费时间表，以便每辆车在第二天的旅程中都充满电。
任何指针或建议都非常感谢，谢谢。
解决方法
您可以将 reg-no 和 car-name 的值存储在 JSON数组中，以轻松获得用户输入的所需值。因此，每当用户在.reg输入框中键入内容时，您都可以获取该值，然后使用filter将其值与 JSON数组进行比较，如果找到匹配项，则在您的name列中会显示错误消息。
然后，confirm按钮的onclick使用each循环遍历所有tr并获得.rmc和.mtnc的值，然后将其计算并放入{{ 1}}列，如果该值为空，则显示错误消息。
演示代码 ：
charge// 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();
});
$(".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 mtnc left")
}
})
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
