Question

我正在尝试用javascript中的视频游戏来比较武器之间的统计数据，但我真的是一个正在开发的菜鸟！

目前我的代码的结果是：

我希望得到类似的东西但是当数字高于0时带有“+”：

我的代码是这样的，但我不知道如何将武器1与武器2进行比较并填写最后一列:(，有人可以帮助我吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Construction dynamique</title>
<style>
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
	text-align:center; 
    vertical-align:middle;
	width:400px;
}
</style>
</head>

<body>
<select id="weapon_1" onchange="showDetail(1, this.value);">
    <option>Choice</option>
</select>
<select id="weapon_2" onchange="showDetail(2, this.value);">
    <option>Choice</option>
</select>
<BR><BR>
<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 indWeapons = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var weapon = MultiArray[indWeapons];                   // 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 = weapon ? weapon[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = weapon ? '<img src="' +weapon[ordre[i]] +'">' : '';
    }
  }
  
  // rempli la dernière colonne
    calculEcart();
  
  
}

// fonction addOption
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 = new Option(data[i][0], i + 1); // on change -> data[i][0] en i + 1    
    oDest.add(option);
  }
}
// tri des données
MultiArray.sort(fctSort);
// remplissage <select>
addOption('weapon_1', MultiArray);
addOption('weapon_2', MultiArray);

//-->

</script>


<!--Début création tableau-->
 
<table id='compare'>
   <tr>
       <th>Weapons</th>
       <td> </td>
       <td> </td>
       <td> Points</td>
   </tr>
   <tr>
       <th>Image</th>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <th>Accuracy</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Power</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Range</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Rate of fire</th>
       <td>  </td>
       <td> </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Stability</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Mobility</th>
       <td> </td>
       <td>  </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Clip Size</th>
       <td>  </td>
       <td>  </td>
	   <td> </td>
   </tr>
</table>

<!--Fin du tableau-->
 

</body>
</html>

致以最诚挚的问候，谢谢你的帮助！

Answer 1

只需同时迭代两个元素并存储差异：

copy

所以可以这样做：

function compare(a,b){
  var result = [""];
  for(var i = 1; i < Math.min( a.length, b.length ); i++){
    var tmp = a[i] - b[i];
    result[i] = (tmp>0?"+":"")+tmp;
  }
  return result;
}

结果将是比较行。

如果你喜欢ES6：

compare(MultiArray[0],MultiArray[1])

Javascript - 比较表格内容

1 个答案: