av午夜久久蜜桃传媒软件,97精品国产一区二区三区

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Verwenden Sie Dropdown-Menüs, um zu ?ndern, was in der Tabelle angezeigt wird

P粉252423906 2023-09-13 16:30:42

721

Ich versuche, ein einfaches Reparaturformular mit HTML zu erstellen. Mithilfe eines Dropdown-Menüs m?chte ich ein Modell ausw?hlen und dann alle kompatiblen Teile in zwei Tabellen anzeigen k?nnen, eine für Neuteile und eine für Ausschuss. Derzeit codiere ich die Daten fest in JavaScript, wenn ich eine Demo mache. Das Problem, das ich habe, ist, dass die Teileliste au?er einem Titel nichts anzeigt. Was habe ich verpasst?

<!DOCTYPE html>
<html>
<head>
    <title>Repair Form</title>
    <style>
        .table {
            border-collapse: collapse;
        }

        .table th, .table td {
            border: 1px solid black;
            padding: 5px;
        }

        .green-button {
            background-color: green;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .red-button {
            background-color: red;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
    </style>
<script>
    // SKU data
    var skuData = [
        ["SKU1", "Description 1", "Value 1"],
        ["SKU2", "Description 2", "Value 2"],
        ["SKU3", "Description 3", "Value 3"]
    ];

    // Model data
    var modelData = [
        ["Brand 1", "Gen 1", "Model 1"],
        ["Brand 2", "Gen 2", "Model 2"],
        ["Brand 3", "Gen 3", "Model 3"]
    ];

    // New parts data
    var newPartsData = [
        ["Part 1", "10", "5", "Model 1,Model 2"],
        ["Part 2", "20", "3", "Model 1,Model 3"],
        ["Part 3", "30", "2", "Model 2,Model 3"]
    ];

    // Salvaged parts data
    var salvagePartsData = [
        ["Part 4", "15", "4", "Model 1,Model 3"],
        ["Part 5", "25", "6", "Model 2,Model 3"],
        ["Part 6", "35", "2", "Model 1,Model 2"]
    ];

    function populateDropdowns() {
        var skuDropdown = document.getElementById('sku');
        var modelDropdown = document.getElementById('model');

        // Populate SKU dropdown
        skuData.forEach(function (item) {
            var option = document.createElement('option');
            option.value = item[0];
            option.text = item[1] + " - " + item[2];
            skuDropdown.appendChild(option);
        });

        // Populate Model dropdown
        modelData.forEach(function (item) {
            var option = document.createElement('option');
            option.value = item[0];
            option.text = item[0] + " - " + item[1] + " - " + item[2];
            modelDropdown.appendChild(option);
        });

        // Initial population of tables
        populateTables();
    }

    function populateTables() {
        var modelSelection = document.getElementById('model').value;

        // Populate New Parts table
        var newPartsTable = document.getElementById('new-parts-table');
        newPartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";

        newPartsData.forEach(function (item) {
            if (item[3].includes(modelSelection)) {
                var row = document.createElement('tr');
                var partCell = document.createElement('td');
                partCell.textContent = item[0];
                row.appendChild(partCell);
                var quantityCell = document.createElement('td');
                quantityCell.textContent = item[2];
                row.appendChild(quantityCell);
                var selectCell = document.createElement('td');
                var checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.name = 'new_parts[]';
                checkbox.value = item[0];
                selectCell.appendChild(checkbox);
                row.appendChild(selectCell);
                newPartsTable.appendChild(row);
            }
        });

        // Populate Salvaged Parts table
        var salvagePartsTable = document.getElementById('salvaged-parts-table');
        salvagePartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";

        salvagePartsData.forEach(function (item) {
            if (item[3].includes(modelSelection)) {
                var row = document.createElement('tr');
                var partCell = document.createElement('td');
                partCell.textContent = item[0];
                row.appendChild(partCell);
                var quantityCell = document.createElement('td');
                quantityCell.textContent = item[2];
                row.appendChild(quantityCell);
                var selectCell = document.createElement('td');
                var checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.name = 'salvaged_parts[]';
                checkbox.value = item[0];
                selectCell.appendChild(checkbox);
                row.appendChild(selectCell);
                salvagePartsTable.appendChild(row);
            }
        });
    }

    function checkValue() {
        var skuValue = parseInt(document.getElementById('sku').value);
        var newParts = document.getElementsByName('new_parts[]');
        var salvagedParts = document.getElementsByName('salvaged_parts[]');
        var totalValue = 0;

        for (var i = 0; i < newParts.length; i++) {
            if (newParts[i].checked) {
                var partName = newParts[i].value;
                var partIndex = newPartsData.findIndex(function (item) {
                    return item[0] === partName;
                });
                totalValue += parseInt(newPartsData[partIndex][1]);
            }
        }

        for (var i = 0; i < salvagedParts.length; i++) {
            if (salvagedParts[i].checked) {
                var partName = salvagedParts[i].value;
                var partIndex = salvagePartsData.findIndex(function (item) {
                    return item[0] === partName;
                });
                totalValue += parseInt(salvagePartsData[partIndex][1]);
            }
        }

        var submitButton = document.getElementById('submit-button');
        if (totalValue < skuValue) {
            submitButton.classList.remove('red-button');
            submitButton.classList.add('green-button');
            submitButton.textContent = 'Pass';
        } else {
            submitButton.classList.remove('green-button');
            submitButton.classList.add('red-button');
            submitButton.textContent = 'Nix';
        }
    }
</script>


</head>
<body onload="populateDropdowns()">
    <h1>Repair Form</h1>
    <form>
        <label for="technician">Technician:</label>
        <input type="text" id="technician" name="technician" required><br><br>

        <label for="sku">SKU:</label>
        <select id="sku" name="sku" required></select><br><br>

        <label for="serial">Serial:</label>
        <input type="text" id="serial" name="serial" required><br><br>

        <label for="model">Model:</label>
        <select id="model" name="model" required onchange="populateTables()"></select><br><br>

        <h2>New Parts</h2>
        <table class="table" id="new-parts-table"></table>

        <h2>Salvaged Parts</h2>
        <table class="table" id="salvaged-parts-table"></table>

        <br>

        <input type="submit" value="Submit" id="submit-button" onclick="checkValue()"><br><br>
    </form>
</body>
</html>

Zuerst habe ich versucht, eine CSV-Datei zu erstellen, um die Daten zu kontrollieren, aber ohne Erfolg. Ich brauche es auch, um lokal zu funktionieren, nicht auf einem Webserver.

P粉252423906

Antworte allen(1)

P粉4768839862023-09-14 00:40:46 1 Etage

您將 brand-1 作為模型下拉列表中的值傳遞給 item[0]，將其更改為 item[2]它代表模型。我建議您在頂部添加一個空白選項，例如“選擇模型”，以便在頁面加載時默認(rèn)不選擇任何選項。不要在段落之外使用。請停止使用 var，使用 const 或 let。如果數(shù)據(jù)將被更改，則使用 let，對于固定數(shù)據(jù)，請使用 const。

// SKU data
let skuData = [
  ["SKU1", "Description 1", "Value 1"],
  ["SKU2", "Description 2", "Value 2"],
  ["SKU3", "Description 3", "Value 3"]
];

// Model data
let modelData = [
  ["Brand 1", "Gen 1", "Model 1"],
  ["Brand 2", "Gen 2", "Model 2"],
  ["Brand 3", "Gen 3", "Model 3"]
];

// New parts data
let newPartsData = [
  ["Part 1", "10", "5", "Model 1,Model 2"],
  ["Part 2", "20", "3", "Model 1,Model 3"],
  ["Part 3", "30", "2", "Model 2,Model 3"]
];

// Salvaged parts data
let salvagePartsData = [
  ["Part 4", "15", "4", "Model 1,Model 3"],
  ["Part 5", "25", "6", "Model 2,Model 3"],
  ["Part 6", "35", "2", "Model 1,Model 2"]
];

function populateDropdowns() {
  var skuDropdown = document.getElementById('sku');
  var modelDropdown = document.getElementById('model');

  // Populate SKU dropdown
  skuData.forEach(function(item) {
    var option = document.createElement('option');
    option.value = item[0];
    option.text = item[1] + " - " + item[2];
    skuDropdown.appendChild(option);
  });

  // Populate Model dropdown
  modelData.forEach(function(item) {
    var option = document.createElement('option');
    option.value = item[2];
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
  });

  // Initial population of tables
  populateTables();
}

function populateTables() {
  var modelSelection = document.getElementById('model').value;

  // Populate New Parts table
  var newPartsTable = document.getElementById('new-parts-table');
  newPartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";

  newPartsData.forEach(function(item) {
    if (item[3].includes(modelSelection)) {
      var row = document.createElement('tr');
      var partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      var quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      var selectCell = document.createElement('td');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'new_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      newPartsTable.appendChild(row);
    }
  });

  // Populate Salvaged Parts table
  var salvagePartsTable = document.getElementById('salvaged-parts-table');
  salvagePartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";

  salvagePartsData.forEach(function(item) {
    if (item[3].includes(modelSelection)) {
      var row = document.createElement('tr');
      var partCell = document.createElement('td');
      partCell.textContent = item[0];
      row.appendChild(partCell);
      var quantityCell = document.createElement('td');
      quantityCell.textContent = item[2];
      row.appendChild(quantityCell);
      var selectCell = document.createElement('td');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'salvaged_parts[]';
      checkbox.value = item[0];
      selectCell.appendChild(checkbox);
      row.appendChild(selectCell);
      salvagePartsTable.appendChild(row);
    }
  });
}

function checkValue() {
  var skuValue = parseInt(document.getElementById('sku').value);
  var newParts = document.getElementsByName('new_parts[]');
  var salvagedParts = document.getElementsByName('salvaged_parts[]');
  var totalValue = 0;

  for (var i = 0; i < newParts.length; i++) {
    if (newParts[i].checked) {
      var partName = newParts[i].value;
      var partIndex = newPartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      totalValue += parseInt(newPartsData[partIndex][1]);
    }
  }

  for (var i = 0; i < salvagedParts.length; i++) {
    if (salvagedParts[i].checked) {
      var partName = salvagedParts[i].value;
      var partIndex = salvagePartsData.findIndex(function(item) {
        return item[0] === partName;
      });
      totalValue += parseInt(salvagePartsData[partIndex][1]);
    }
  }

  var submitButton = document.getElementById('submit-button');
  if (totalValue < skuValue) {
    submitButton.classList.remove('red-button');
    submitButton.classList.add('green-button');
    submitButton.textContent = 'Pass';
  } else {
    submitButton.classList.remove('green-button');
    submitButton.classList.add('red-button');
    submitButton.textContent = 'Nix';
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
}

.table {
  border-collapse: collapse;
}

.table th,
.table td {
  border: 1px solid black;
  padding: 5px;
}

.green-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.red-button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

<body onload="populateDropdowns()">
  <h1>Repair Form</h1>
  <form>
    <label for="technician">Technician:</label>
    <input type="text" id="technician" name="technician" required>

    <label for="sku">SKU:</label>
    <select id="sku" name="sku" required></select>

    <label for="serial">Serial:</label>
    <input type="text" id="serial" name="serial" required>

    <label for="model">Model:</label>
    <select id="model" name="model" required onchange="populateTables()">
      <option>Select Model</option>
    </select>

    <h2>New Parts</h2>
    <table class="table" id="new-parts-table"></table>

    <h2>Salvaged Parts</h2>
    <table class="table" id="salvaged-parts-table"></table>

    <input type="submit" value="Submit" id="submit-button" onclick="checkValue()">
  </form>
</body>