htmlテーブル内のプログレスバー

データベースに保存されているすべてのメソッド/タスクの進行状況バーを「推測して」表示するテーブルがあります。このプログレスバーの基礎は、startDateとendDateの2つの日付です。私の問題は、プログレスバーはテーブルの最初の行でしか動作しないようです。私は初心者だと、まだので、任意の助けを練習することは大歓迎です。..htmlテーブル内のプログレスバー

これは私のコード..です

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

私のjavascriptのはこれです：

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

そのヘルプ、除草方法の日付は開始日：10-1-2017 - 終了日：10-4-2017、耕うん10-8-2017 - > 10-11-2017および給水地10-12-2017 - > 10-14-2017

出典

2017-10-18 kisham08

：だから、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); }

だからあなたの最終的なコードは次のようになります。 jQueryはidでクエリに一致する最初のアイテムのみを返します。コードには他にも問題がありますが、その前提を修正すれば、デバッグ時に他のものを解明するのに役立ちます。 –

これは、同じIDを持つ複数の入力を持つしたがって、JS関数を適用すると、最初の行にのみ適用されます。関数をPHPに適用することをお勧めします。複数の要素に同じidを与えないでください

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

出典

2017-10-18 20:18:04

ありがとうございました。 php関数を使うのは決して私の頭を越えたことはありません。私は将来的にはPHP関数を利用することになるでしょう。 – kisham08

@ kisham08あなたの返信ありがとうございます、それは正しい答えとして選択してください:) –

htmlテーブル内のプログレスバー

答えて

関連する問題