HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Construction dynamique</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<select id="arme"></select>
<select id="arme2"></select>
<script>
MultiArray = [];
MultiArray.push( ["arx160", 89, 27, 61, 81, 92, "arx160.png", 83, 35]);
MultiArray.push( ["tar21", 89, 27, 61, 81, 92, "tar21.png", 83, 35]);
MultiArray.push( ["g36gl", 89, 27, 61, 81, 92, "g36gl.png", 83, 35]);
MultiArray.push( ["CZ 805 A2", 80, 33, 61, 71, 84, "cz805a2.png", 83, 35]);
function fctSort(a, b) {
return (a[0].toUpperCase() > b[0].toUpperCase()) ? 1 : - 1;
}
function addOption(id_dest, data) {
var oDest = document.querySelector('#' + id_dest);
var option;
var i;
var nb = data.length;
console.log(id_dest, data);
for (i = 0; i < nb; i += 1) {
option = document.createElement('OPTION');
option.text = data[i][0];
option.value = data[i][0];
oDest.appendChild(option);
}
}
// tri des données
MultiArray.sort(fctSort);
// remplissage <select>
addOption('arme', MultiArray);
addOption('arme2', MultiArray);
// création du tableau
function createTable(tableData) {
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.body.appendChild(table);
}
createTable([
["Weapons", "Weapon 1", "Weapon 2", "Points"],
["Images", "Image 1", "Image 2", ""],
["Accuracy", "ACC 1", "ACC 2", ""],
["Power", "Power 1", "Power 2", ""],
["Range", "Range 1", "Range2 2", ""],
["Rate Of Fire", "Rof 1", "Rof 2", ""],
["Stability", "Stab 1", "Stab 2",...