Barre de progression dans la table html

J'ai une table qui montrera "supposément" les barres de progression de chaque méthode/tâche sauvegardée dans la base de données. La base de cette barre de progression sont deux dates, startDate et endDate. Mon problème est que, la barre de progression semble seulement fonctionner dans la première rangée de la table. Je suis un débutant et pratique encore si toute aide est la bienvenue ..Barre de progression dans la table html

Ceci est mon code ..

<body onload="progressbar()"> 
<div> 
    <table> 
     <tr> 
      <th width="20%">Method</th> 
      <th width="50%">Progress</th> 
     </tr><?php 

       while($row_method = mysqli_fetch_array($result_method)) 
       { 

        echo ' 

       <tr> 
        <td> '.$row_method["methodName"].' 
        </td> 
        <td> 
        <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"> 
        <span class="sr-only">70% Complete</span> 
        <input type="hidden" id="start" value = "'.$row_method["methodStart"].'" /> 
        <input type="hidden" id="end" value = "'.$row_method["methodEnd"].'" /> 
       </div> 

        </td> 
       </tr> 

       '; 
       }; 
       ?> 
    </table> 
</div>

mon javascript est la suivante:

function progressbar() { 
var start1 = $('#start').val(); 
var end1 = $('#end').val(); 
var start = new Date(start1), 
    end = new Date(end1), 
    today = new Date(); 

var percentage = Math.round(100 * (today - start)/(end - start)); 
if (percentage >= 100) { 
    $('#bar').attr('aria-valuenow', 100).css('width', 100 + '%'); 
} 
}

si c'est n'importe quelle aide, les dates de la méthode de désherbage sont la date de début: 10-1-2017 - Date de fin: 04/10/2017, labourage 08/10/2017 -> 11/10/2017 et terrain arrosage 12/10/2017 -> 10-14-2017

Source

2017-10-18 kisham08

Ne pas donner de multiples éléments le même identifiant. jQuery renvoie uniquement le premier élément correspondant à une requête par identifiant. Il y a d'autres problèmes avec le code, mais si vous corrigez cette hypothèse, cela devrait aider à élucider les autres lors du débogage. –

Cela est arrivé parce que vous avoir plusieurs entrées avec le même ID. Donc, une fois que vous appliquez la fonction JS, elle s'applique uniquement à la première ligne. Mon conseil pour vous d'appliquer la fonction jeter PHP. Ainsi, la fonction PHP sera

function progressbar($start_date,$end_date) 
{ 
    $start_time = strtotime($start_date); 
    $now = time(); 
    $end_time = strtotime($end_date); 

    $percent = round(($now-$start_time)/($end_time-$start_time) * 100); 

    return($percent); 
}

Ainsi, votre code final sera comme:

<body> 
<div> 
    <table> 
     <tr> 
      <th width="20%">Method</th> 
      <th width="50%">Progress</th> 
     </tr> 

     <?php 
     function progressbar($start_date,$end_date) 
     { 
      $start_time = strtotime($start_date); 
      $now = time(); 
      $end_time = strtotime($end_date); 

      $percent = round(($now-$start_time)/($end_time-$start_time) * 100); 

      return($percent); 
     } 

     while($row_method = mysqli_fetch_array($result_method)) 
     { 

      $progressbar = progressbar($row_method["methodStart"],$row_method["methodEnd"]); 

      echo ' 

       <tr> 
        <td> '.$row_method["methodName"].' 
        </td> 
        <td> 
        <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="'.$progressbar.'" aria-valuemin="0" aria-valuemax="100" style="width:0%"> 
        <span class="sr-only">'.$progressbar.'% Complete</span> 
       </div> 

        </td> 
       </tr> 

       '; 
     }; 
     ?> 
    </table> 
</div>

Source

2017-10-18 20:18:04

Merci beaucoup. Il ne m'a jamais traversé l'esprit d'utiliser les fonctions php. Je vais certainement faire usage de fonctions PHP dans le futur .... – kisham08

@ kisham08 Merci pour votre réponse s'il vous plaît sélectionner la réponse correcte :) –

Barre de progression dans la table html

Répondre

Questions connexes