Fortschrittsbalken in HTML-Tabelle

Ich habe eine Tabelle, die "angeblich" Fortschrittsbalken von jeder Methode/Aufgabe in der Datenbank gespeichert werden soll. Die Basis für diesen Fortschrittsbalken sind zwei Daten, das startDate und das endDate. Mein Problem ist, dass der Fortschrittsbalken nur in der ersten Zeile der Tabelle zu funktionieren scheint. Ich bin nur ein Anfänger und noch praktizierenden so dass jede Hilfe ist willkommen ..Fortschrittsbalken in HTML-Tabelle

Dies ist mein 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>

mein Javascript ist dies:

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 + '%'); 
} 
}

Wenn es irgendeine Hilfe ist, Datum der Entgiftungsmethode Startdatum: 10-1-2017 - Enddatum: 10-4-2017, Bodenbearbeitung 10-8-2017 -> 10-11-2017 und Bewässerungsland 10-12-2017 -> 10-14-2017

Quelle

2017-10-18 kisham08

nicht mehrere Elemente, die die gleiche ID geben Sie. jQuery gibt nur das erste Element zurück, das einer Abfrage nach ID entspricht. Es gibt andere Probleme mit dem Code, aber wenn Sie diese Annahme beheben, sollte es helfen, die anderen beim Debuggen zu erklären –

Dies ist passiert, weil Sie haben mehrere Eingänge mit der gleichen ID. Wenn Sie also die JS-Funktion anwenden, wird sie nur auf die erste Zeile angewendet. Ich empfehle Ihnen, Funktion PHP zu verwenden. So wird die PHP-Funktion sein

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); 
}

so Ihre endgültige Code aussehen wird:

<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>

Quelle

2017-10-18 20:18:04

Vielen Dank. Es kam mir nie in den Sinn, PHP-Funktionen zu benutzen. Ich werde sicher php Funktionen in Zukunft verwenden .... – kisham08

@ kisham08 Danke für Ihre Antwort wählen Sie bitte als richtige Antwort :) –

Fortschrittsbalken in HTML-Tabelle

Antwort

Verwandte Themen