时间戳

首页 > 解决方案 > 如何显示来自表格条目的计算？

javascript - 如何显示来自表格条目的计算？

问题描述

我的代码应该通过将油箱容积除以行驶距离来计算车辆的油耗，然后在表格行“油耗”中显示答案。然后，“最有效”列应该在最高效的行中显示一个星号高效的车辆。

作业说要使用一个对象，但我只是不明白它们是如何工作的。请帮忙，我超级卡住了。 

<table>
    <tr>
        <th>Registration Number</th>
        <th>Volume of fuel tank (litres)</th>
        <th>Distance traveled on full tank (km) </th>
        <th>Fuel consumption (litres/Km) </th>
        <th>Most efficient</th>
    </tr>
    <tr>
        <td><p id="registration1"></p></td>
        <td><p id="tank1"></p></td>
        <td><p id="distance1"></p></td>
        <td><p id="consumption1"></p></td>
        <td><p id="efficient1"></p></td>
    </tr>
    <tr>
        <td><p id="registration2"></p></td>
        <td><p id="tank2"></p></td>
        <td><p id="distance2"></p></td>
        <td><p id="consumption2"></p></td>
        <td><p id="efficient2"></p></td>
    </tr>
    <tr>
        <td><p id="registration3"></p></td>
        <td><p id="tank3"></p></td>
        <td><p id="distance3"></p></td>
        <td><p id="consumption3"></p></td>
        <td><p id="efficient3"></p></td>
    </tr>
    <tr>
        <td><p id="registration4"></p></td>
        <td><p id="tank4"></p></td>
        <td><p id="distance4"></p></td>
        <td><p id="consumption4"></p></td>
        <td><p id="efficient4"></p></td>
    </tr>
</table>

<script>

var i = 1;
var registration = [];
var tank = [];
var distance = [];
var consumption = [];

function Vehicle() {
for (i = 1; i < 5; i++) {
    registration.push(prompt("Please enter a 6-character vehicle registration number"));
    document.getElementById("registration" + i).innerHTML = registration[i - 1];

    tank.push(prompt("Please enter the volume of the vehicle's fuel tank in litres"));
    document.getElementById("tank" + i).innerHTML = tank[i - 1];

    distance.push(prompt("Please enter the distance the vehicle can travel on a full tank of fuel"));
    document.getElementById("distance" + i).innerHTML = distance[i - 1];

标签： javascriptobject

解决方案

我们应该能够收集数据，创建车辆对象，然后按油耗排序。

然后，我们将在与最高效车辆相对应的行旁边显示一个星号。

function getVehicleInfo(vehicleId) {
    var vehicle = {};
    vehicle.id = vehicleId;
    vehicle.registration = prompt("Please enter a 6-character vehicle registration number");
    vehicle.tank = (parseFloat(prompt("Please enter the volume of the vehicle's fuel tank in litres")));
    vehicle.distance = (parseFloat(prompt("Please enter the distance the vehicle can travel on a full tank of fuel")));
    // Fuel consumption is fuel used per kilometre. (Check for divide by zero)
    vehicle.consumption = vehicle.distance ? (vehicle.tank / vehicle.distance): null;
    return vehicle;
}

function displayVehicleInfo(vehicle) {
    rowElement = document.createElement("tr");
    rowElement.setAttribute("id", vehicle.id);
    tableElement = document.getElementById("vehicle-table");
    vehicleHtml = `<td>${vehicle.registration}</td>`
    vehicleHtml += `<td>${vehicle.tank}</td>`
    vehicleHtml += `<td>${vehicle.distance}</td>`
    vehicleHtml += `<td>${vehicle.consumption ? vehicle.consumption.toFixed(2): 'Unknown'}</td>`;
    rowElement.innerHTML = vehicleHtml;
    tableElement.appendChild(rowElement);
    return vehicle;
}

function ShowVehicleData() {
    var vehicles = [];
    for (var i = 1; i < 5; i++) {
        // Create a vehicle object from the user input.
        var vehicle = getVehicleInfo(i);
        displayVehicleInfo(vehicle);
        vehicles.push(vehicle);
    }
  
    // Find the most efficient by sorting by fuel consumption.
    vehicles.sort((vehicleA, vehicleB) => vehicleA.consumption - vehicleB.consumption);
    mostEfficientId = vehicles[0].id;
    document.getElementById(mostEfficientId).innerHTML += "<td>*</td>"
}

ShowVehicleData();
<head>
<link rel="stylesheet" href="https://bootswatch.com/4/cerulean/bootstrap.css"  crossorigin="anonymous">
</head>
<body>
<table id="vehicle-table" class="table table-striped">
<tr>
    <th>Registration Number</th>
    <th>Volume of fuel tank (litres)</th>
    <th>Distance traveled on full tank (km) </th>
    <th>Fuel consumption (litres/Km) </th>
    <th>Most efficient</th>
</tr>
</table>
</body>

推荐阅读