使用下拉式選單更改表格中顯示的內容

Question

我正在嘗試使用HTML建立一個簡單的維修表單，使用下拉清單我希望能夠選擇一個模型，然後在兩個表中顯示所有相容零件，一個用於新零件，一個用於報廢。目前，我在進行演示時正在將資料硬編碼到JavaScript中。我遇到的問題是零件表除了標題之外沒有顯示任何內容。我錯過了什麼？ RepairFo

P粉476883986 · Answer

您將brand-1 作為模型下拉清單中的值傳遞給item[0]，將其變更為item[2]它代表模型。我建議您在頂部新增一個空白選項，例如“選擇模型”，以便在頁面載入時預設不選擇任何選項。不要在段落之外使用

。請停止使用 var，使用 const 或 let。如果資料將被更改，則使用 let，對於固定數據，請使用 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 = "PartQuantitySelect";

  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 = "PartQuantitySelect";

  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;
}


  Repair Form
  
    Technician:
    

    SKU:
    

    Serial:
    

    Model:
    

    New Parts
    

    Salvaged Parts

使用下拉式選單更改表格中顯示的內容

全部回覆(1)我來回復