HTML表格中的进度栏

Question

I have a table that will "supposedly" show progress bars of every method/task saved on the database. 我有一张表，该表“应该”显示数据库中保存的每个方法/任务的进度条。 The basis for this progress bar are two dates, the startDate and the endDate. 该进度条的基础是两个日期，即startDate和endDate。 My problem is that, the progress bar only seems to work in the first row of the table. 我的问题是，进度栏似乎只在表的第一行中起作用。 I'm just a beginner and still practicing so any help is welcome.. 我只是一个初学者，仍然在练习，因此欢迎任何帮助。

This is my 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>

my javascript is this: 我的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 + '%');
}
}

if its any help, weeding method's dates are start date : 10-1-2017 - end date: 10-4-2017, tilling 10-8-2017 --> 10-11-2017 and watering land 10-12-2017 --> 10-14-2017 如果有帮助，除草方法的日期是开始日期：10-1-2017-结束日期：10-4-2017，耕种10-8-2017-> 10-11-2017和浇水土地10-12-2017- -> 2017年10月14日

Answer 1

This happened because you have multiple inputs with the same ID. 发生这种情况是因为您有多个具有相同ID的输入。 So once you apply the JS function it's applied only to the first row. 因此，一旦您应用了JS函数，它只会应用于第一行。 My recommend for you to apply function throw PHP. 我建议您应用函数抛出PHP。 So the PHP function will be 因此，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);
}

So your final code will be like: 因此，您的最终代码将如下所示：

<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 个解决方案

解决方案1
2 2017-10-18 20:18:04

HTML表格中的进度栏

问题描述

1 个解决方案

解决方案1 2 2017-10-18 20:18:04

解决方案1
2 2017-10-18 20:18:04