如何根据 SQL 列中的值扩展 DIV 宽度

Question

我想要达到的目标：

因此，基本上，当我对客户投赞成票时，绿条会增加，而当我投反对票时，红条会增加。

我目前正在使用它，因此当您投票赞成或反对时，它会在 2 个不同的列中向数据库提交一个值：Positive 和 Negative。在条形图所在的图片中，我目前有空 div。

那么如何根据票数展开 div 呢？

我的clients.php：

<?php

$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

            "
            <div style='width: 35%;'>
                <div style='color: green;'></div>
            </div>

            <div style='display: inline-block; width: 5%;'>      
                <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
            </div>" .

                 "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

            "<div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
            </div>

            <div style='width: 35%;'>
                <div style='color: red;'></div>
            </div>

         </div> 
        <br />";
}

echo "</div>";

?>

宽度为 35% 的两个 div 将作为进度条。

列应该根据总票数的百分比显示，所以说有 4 票，3 上 1 下，它显示 75% 的绿色，25% 的红色。

Answer 1

为此，您应该从数据库中获取正票和反对票并计算总票数。

然后你应该找到两者的百分比并在你的代码中设置宽度。请记住添加“%”和结尾，以便浏览器知道您正在使用百分比。

如果我们以上面的示例为例，其中 1 向下，3 向上，数学如下所示：

y = (1/4)*100 = 25%

这里我已经在你的代码中实现了：

$clientInfo = "SELCT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
  $positive = $client['positive'];
  $negative = $client['negative'];
  $total = ($positive+$negative);

  // Calculate width in percentage
  $positiveWidth = ($positive/$total)*100."%";
  $negativeWidth = ($negative/$total)*100."%";

  // The output
  echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

    "
    <div style='width: $positiveWidth;'>
        <div style='color: green;'></div>
    </div>

    <div style='display: inline-block; width: 5%;'>      
        <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
    </div>" .

         "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

    "<div style='display: inline-block; width: 5%;'>
        <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
    </div>

    <div style='width: $negativeWidth;'>
        <div style='color: red;'></div>
    </div>

  </div> 
  <br />";
}

echo "</div>";