html表格中的進度條

我有一張表格，它會「顯示」顯示數據庫中保存的每個方法/任務的進度條。這個進度條的基礎是兩個日期，startDate和endDate。我的問題是，進度條似乎只能在表格的第一行工作。我只是一個初學者，還在練，所以任何幫助是值得歡迎..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

不要給多個元素相同的ID。 jQuery將只會返回與id匹配查詢的第一個項目。代碼還有其他問題，但是如果你修復了這個假設，那麼在調試 –

這是因爲你具有相同ID的多個輸入。所以一旦你應用了JS函數，它只應用於第一行。我推薦給你應用函數拋出PHP。所以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); 
}

所以你的最終代碼會像：

<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表格中的進度條

回答

相關問題