Utilisez les menus déroulants pour modifier ce qui apparaît dans le tableau
J'essaie de créer un formulaire de réparation simple en utilisant HTML, à l'aide d'une liste déroulante. Je souhaite pouvoir sélectionner un modèle, puis afficher toutes les pièces compatibles dans deux tableaux, un pour les pièces neuves et un pour les rebuts. Actuellement, je code en dur les données en JavaScript lorsque je fais une démo. Le problème que j'ai est que la liste des pièces n'affiche rien d'autre qu'un titre. Qu'est-ce que j'ai raté?
<!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>
Au départ, j'ai essayé de créer un fichier CSV pour contrôler les données, mais sans succès. J'en ai également besoin pour travailler localement, pas sur un serveur Web.
