html表格中的进度条答案

【问题标题】：Progress bar in html tablehtml表格中的进度条
【发布时间】：2018-03-30 19:21:17
【问题描述】：

我有一个表格，可以“据说”显示保存在数据库中的每个方法/任务的进度条。此进度条的基础是两个日期，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 --> 10-11-2017 和浇水 10-12-2017 --> 10-14-2017

【问题讨论】：

不要给多个元素相同的id。 jQuery 只会返回与 id 查询匹配的第一个项目。代码还有其他问题，但如果你修正了这个假设，它应该有助于在调试时阐明其他问题

标签： javascript jquery twitter-bootstrap html-table

【解决方案1】：

发生这种情况是因为您有多个具有相同 ID 的输入。所以一旦你应用了 JS 函数，它只应用于第一行。我建议您应用函数 throw 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>

【讨论】：

非常感谢。我从来没有想过使用 php 函数。以后一定会使用php函数的......
@kisham08 感谢您的回复，请选择它作为正确答案:)