Question

我有一个表“可以”显示保存在数据库中的每个方法/任务的进度条。此进度条的基础是两个日期，startDate和endDate。我的问题是，进度条似乎只在表的第一行中起作用。我只是一个初学者，仍在练习，所以欢迎任何帮助..

这是我的代码..

<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 - ＆gt; 10-11-2017和浇水土地10-12-2017 - ＆gt; 2017年10月14日

Answer 1

这是因为您有多个具有相同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>

html表中的进度条

1 个答案: