cari

Rumah  >  Soal Jawab  >  teks badan

Gunakan menu lungsur untuk menukar perkara yang muncul dalam jadual

Saya cuba mencipta borang pembaikan mudah menggunakan HTML, menggunakan menu lungsur saya mahu dapat memilih model dan kemudian memaparkan semua bahagian yang serasi dalam dua jadual, satu untuk bahagian baharu dan satu untuk sekerap. Pada masa ini, saya sedang mengodkan data ke dalam JavaScript apabila saya melakukan demo. Masalah yang saya hadapi ialah senarai bahagian tidak menunjukkan apa-apa kecuali tajuk. Apa yang saya terlepas? 

<!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>

Pada mulanya, saya cuba mencipta fail CSV untuk mengawal data, tetapi tidak berjaya. Saya juga memerlukannya untuk berfungsi secara tempatan, bukan pada pelayan web.

P粉252423906P粉252423906468 hari yang lalu597

membalas semua(1)saya akan balas

  • P粉476883986

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

    Anda akan brand-1 作为模型下拉列表中的值传递给 item[0]，将其更改为 item[2]Ia mewakili model. Saya cadangkan anda menambah pilihan kosong di bahagian atas seperti "Pilih Model" supaya tiada pilihan dipilih secara lalai apabila halaman dimuatkan. Jangan gunakan
    。请停止使用 var，使用 const 或 let di luar perenggan. Jika data akan ditukar, gunakan let, untuk data tetap, gunakan 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>

    balas
    0
  • Batalbalas