将任何变量放入 table 中的任何位置

Question

我对 JavaScript 还是很陌生，正在努力提高我的基本技能。我构建了一个简单的 table，您可以在其中输入汽车注册表并弹出汽车名称，输入剩余英里数和所需英里数，它会计算您需要充电的小时数。

目前您必须在第一行中输入汽车 1 的注册号，在第二行中输入汽车 2，在第三行中输入汽车 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;
    }
});

如您所见，它有很多代码，我相信一定有一种方法可以满足我的需要，而且更短？

最终结果是根据用户提交的信息生成时间-table的充电时间表，以便每辆车在第二天的旅程中充满电。

非常感谢任何指点或建议，谢谢。

Answer 1

您可以将 reg-no 和 car-name 的值存储在 JSON Array 轻松获取用户输入的所需值。因此，每当用户输入 .reg input-box 时，您都可以获得该值，然后使用 filter 将其值与 JSON 数组 如果找到匹配项，则在 name 列中显示该值，否则显示错误消息。

然后，单击 confirm 按钮使用 each 循环遍历所有 tr 并获取 .rmc 和 .mtnc 的值并计算它并将所需的总数放入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")
    }
  })
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<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>
  <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" type="time"></span><input class="time question" 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">
        </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">
        </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">
        </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/>
        </td>

      </tr>
    </tbody>
    <table>
    <button class="confirm">Confirm Reg</button>
    <button class="reset" type="rest">Reset Reg</button>
  </table>
  <button id="generate-time-table" class="generate">Generate Schedule</button>

将任何变量放入 table 中的任何位置

Getting any variable into any position in table

optimization

jquery

refactoring

if-statement