JSFiddle - React, Tailwind, and code Playground
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_1" onchange="showDetail(1, this.value);">
<option>Choix</option>
</select>
<select id="arme_2" onchange="showDetail(2, this.value);">
<option>Choix</option>
</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;
}
/**
* Fonction de remplissage d'une colonne du tableau
* @param {Number} col - colonne concernée par le remplissage
* @param {Number} ind - index dans le tableau de données
*/
function showDetail(col, ind) {
var oDest = document.querySelector('#compare'); // récup. de la table ayant pour id=compare
var ordre = [0,6,1,2,3,4,5,7,8]; // ordre d'affichage des données dans le tableau
var oRows = oDest.rows; // get collection des lignes
var indArme = ind > 0 ? ind - 1 : null; // récup. index des données à traiter
var arme = MultiArray[indArme]; // pointe les données à afficher
var i; // variable de boucle
var nb = ordre.length;
for (i = 0; i < nb; i += 1) {
if( ordre[i] !== 6){
oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
}
else {
oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
}
}
// rempli la dernière colonne
calculEcart();
}
// fonction addOption
function addOption(id_dest, data) {
var oDest = document.querySelector('#' +...