将任何变量移到表中的任何位置

问题描述

我对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")
    }
  })
});