javascript - 尝试将组合框与 mysql 和 PHP 绑定(bind)

Question

我在组合框填充数据时遇到问题。

我有一个表用户，其中包含以下列:

• usrIndex
• usr昵称
• usr全名
• usrEmail

我们正在绑定(bind)数据，包括与其他表(例如 hrh...)的连接，并且我们正在使用以下代码计算用户心率及其卡路里:

$totalPoints = 0;
$totalDuration = 0;
$totalCalories = 0;
$noOfParticipants = 0;
$includedUsers = 0;
$participants = "";

主程序

$query = "SELECT DISTINCT usrIndex,usrNickname";
$query .= " FROM hrheader hrh";
$query .= " INNER JOIN `user` usr ON hrh.hrhUsrIndex=usr.usrIndex";
$query .= " WHERE usrSIndex=$sIndex";
$query .= " AND hrhStart>'" . $start . "' AND hrhStart<'" . date("Y-m-d", strtotime($end . " +1 days")) . "'";
$query .= " ORDER BY usrNickname";

$gresult = mysql_query($query);
if ($gresult) 
{
    $noOfParticipants = mysql_num_rows($gresult);
    $participants = "<table style='text-align:center;font-size:18px;width:980px;margin-   top:16px;color:#231f20;'>";
    $participants .= "<tr>";
    $participants .= "<th>Nickname</th><th>Time (Hours &amp; Mins)</th><th>Average Effort</th><th>Calories</th><th><img src='../images/mepslogo.png' /></th>";
    $participants .= "</tr>";

下面的代码和图表有助于清楚地理解问题:

while ($grow = mysql_fetch_array($gresult)) 
{
    $query = "SELECT ROUND(AVG(hr/hrhMaxHR)*100) AS AverageEffort,ROUND(AVG(hr)) AS AverageHeartRate,ROUND(MAX(hr)) AS MaxHeartRate,";
    $query .= " COUNT(DISTINCT hrhIndex) AS NumberOfMoves";
    $query .= " FROM `hrheader` hrh INNER JOIN hr ON hrh.hrhIndex=hr.hrHrhIndex";
    $query .= " WHERE hrhUsrIndex=" . $grow['usrIndex'] . " AND hr>0";
    $query .= " AND hrReceivedTime>'" . $start . "' AND hrReceivedTime<'" . date("Y-m-d", strtotime($end . " +1 days")) . "'";

    $result = mysql_query($query);
    $pAverageEffort = 0;
    $pAverageHeartRate = 0;
    $pMaxHeartRate = 0;
    $pNumberOfMoves = 0;

    if ($result)
    {
        $row = mysql_fetch_array($result);
        if ($row) 
        {
            $pAverageEffort = $row['AverageEffort'] . "%";
            $pAverageHeartRate = $row['AverageHeartRate'];
            $pMaxHeartRate = $row['MaxHeartRate'];
            $pNumberOfMoves = $row['NumberOfMoves'];
        }
    }

    $query = "SELECT hr,hrReceivedTime,hrhMaxHR,hrhWeight,FLOOR(DATEDIFF(hrReceivedTime,usrDOB)/365) AS Age,usrGender";
    $query .= " FROM hrheader hrh INNER JOIN hr ON hrh.hrhIndex=hr.hrHrhIndex";
    $query .= " INNER JOIN `user` usr ON hrh.hrhUsrIndex=usr.usrIndex";
    $query .= " WHERE hrhUsrIndex=" . $grow['usrIndex'] . " AND hr>0";
    $query .= " AND hrReceivedTime>'" . $start . "' AND hrReceivedTime<'" . date("Y-m-d", strtotime($end . " +1 days")) . "'";
    $query .= " ORDER BY hrReceivedTime";
    //echo $query;
    $result = mysql_query($query);
    $lastReceived = false;

    if ($result) 
    {
        $t = 0;
        $pDuration = 0;

        $zone1 = 0;
        $zone2 = 0;
        $zone3 = 0;
        $zone4 = 0;
        $zone5 = 0;
        $count = 0;
        $pCalories = 0;

        while ($row = mysql_fetch_array($result))
        {
            if ($lastReceived)
            {
                $t = TimeDifference($lastReceived, $row['hrReceivedTime']);
                if ($t < 5)
                {
                    if ($row['hr'] > 0) 
                    {
                        if ($row['hr'] > $row['hrhMaxHR'] * 0.9) 
                        {
                            $zone5 += $t;
                        }
                        elseif ($row['hr'] > $row['hrhMaxHR'] * 0.8)
                        {
                            $zone4 += $t;
                        }
                        elseif ($row['hr'] > $row['hrhMaxHR'] * 0.7)
                        {
                            $zone3 += $t;
                        }
                        elseif ($row['hr'] > $row['hrhMaxHR'] * 0.6)
                        {
                            $zone2 += $t;
                        }
                        else
                        {
                            $zone1 += $t;
                        }
                        $count++;
                        $pDuration += $t;
                        $pCalories += calculateCalPerMin($row['hr'], $row['hrhWeight'], $row['Age'], $row['usrGender']) * $t;
                    }
                }
            }
            $lastReceived = $row['hrReceivedTime'];
        }
        $zone1 = floor($zone1);
        $zone2 = floor($zone2);
        $zone3 = floor($zone3);
        $zone4 = floor($zone4);
        $zone5 = floor($zone5);

        $pPoints = 0;
        $pPoints+=calculatePoints(1, $zone1);
        $pPoints+=calculatePoints(2, $zone2);
        $pPoints+=calculatePoints(3, $zone3);
        $pPoints+=calculatePoints(4, $zone4);
        $pPoints+=calculatePoints(5, $zone5);

        $totalCalories+=$pCalories;
        $totalPoints+=$pPoints;
        $totalDuration+=$pDuration;

        if (mysql_num_rows($result) > 0) 
        {
            mysql_data_seek($result, 0);
            $row = mysql_fetch_array($result);
            $include = 1;
            if (!empty($targetGroup)) 
            {
                if ($targetGroup != $row['usrGender'])
                {
                    $include = 0;
                }
            }
            if (!empty($targetNoOfSessions)) 
            {
                if ($targetNoOfSessions < $pNumberOfMoves) 
                {
                    $include = 0;
                }
            }
            if (!empty($targetDuration))
            {
                $x = explode(":", $targetDuration);
                $targetDuration = ($x[0] * 60) + $x[1];
                if ($targetDuration < $pDuration)
                {
                    $include = 0;
                }
            }
            if (!empty($targetAveEffort))
            {
                if ($targetAveEffort > floor($pAverageEffort))
                {
                    $include = 0;
                }
            }
            if (!empty($targetTimeInZones))
            {
                $targetTimeInZones = intval($targetTimeInZones);
                if (!empty($targetTimeInZones))
                {
                    switch ($targetTimeInZones)
                    {
                        case 1:
                            if (empty($zone1))
                                $include = 0;
                            break;
                        case 2:
                            if (empty($zone2))
                                $include = 0;
                            break;
                        case 3:
                            if (empty($zone3))
                                $include = 0;
                            break;
                        case 4:
                            if (empty($zone4))
                                $include = 0;
                            break;
                        case 5:
                            if (empty($zone5))
                                $include = 0;
                            break;
                    }
                }
            }
            if (!empty($targetCalories))
            {
                if ($targetCalories >= $pCalories)
                {
                    $include = 0;
                }
            }
            if (!empty($targetPoints))
            {
                $debug .= "$targetPoints - $pPoints --";
                if ($targetPoints >= $pPoints)
                {
                    $include = 0;
                }
            }

            if ($include == 1)
            {
                $includedUsers+=1;
            }
        }
        if ($include == 1)
        {
            $participants .= "<tr><td>" . $grow['usrNickname'] . "</td><td>" . FormatTime($pDuration) . "</td><td>$pAverageEffort</td><td>" . floor($pCalories) . "</td><td>$pPoints</td></tr>";
        }
    }
}
$participants .= "</table>";

这是主程序的 html 代码(这里我们定义 html 表):

<div class="txt" style="margin-right:10px;margin-top:16px;font-size:18px;width:462px;float:right">
    <div class="txtl"></div>
    <div class="txtr"></div>
    <span>% of group that achieved target</span>
    <span id="spanPercentAchieved" style="color:black;float:right">-%</span>
</div>
<div class="txt" style="margin-left:10px;margin-top:16px;font-size:18px;width:462px">
    <div class="txtl"></div>
    <div class="txtr"></div>
    <span>Number of users achieved target</span>
    <span id="spanNumberAchieved" style="color:black;float:right">-</span>
</div>
<span id="spanParticipants">
    <table style='text-align:center;font-size:18px;width:980px;margin-top:16px;color:#231f20;'>
        <tr>
            <th>Nickname</th>
            <th>No of Sessions</th>
            <th>Duration</th>
            <th>Average Effort</th>
            <th><img src='../images/mepslogo.png' /></th>
        </tr>
    </table>
</span>

我已经在“主程序”中指明了查询并将数据绑定(bind)到html表

这段代码工作正常......但我的问题是

我想在该组合框中的昵称标题处设置 html 表内的组合框，选项如下(昵称、全名、电子邮件)，当用户选择这些选项(全名、电子邮件)时，他们将能够看到用户的电子邮件以及当前显示昵称的人的全名..

我想要这样的:

如果用户选择全名，将显示全名而不是昵称；当用户选择电子邮件 ID 时，将显示电子邮件 ID 而不是用户的昵称。

此组合框选择将在表格列标题中设置。

有人可以帮忙吗？

任何人都可以帮助解决这个...这个主题。

Answer 1

您正在寻找这样的东西吗？ http://test.puggan.se/test/column_test.php

这是一个简单的 JavaScript Soulotion，在 Firefox 中测试，可能有一个更简单的解决方案，即 JQuery。如果您将问题标记为 javascript或jquery ,您可能会得到更多懂数千种语言的人的回答

上面链接的示例中的代码:

<html>
    <head>
        <title>select column test</title>
        <script>
            function select_column(column_name)
            {
                document.getElementById('column_style').textContent = '.col_hideable div.col_' + column_name + ' {display: block;}';
            }
        </script>
        <style id='column_style'>
            .col_hideable div.col_nick_name {display: block;}
        </style>
        <style>
            TH, TD {border: solid gray 1px;}
            .col_hideable div {display: none;}
        </style>
    </head>
    <body>
        <table id='the_table'>
            <thead>
                <tr>
                    <th>
                        <select id='column_selector' onchange='select_column(this.value)'>
                            <option value='nick_name'>Nickname</option>
                            <option value='full_name'>Full name</option>
                            <option value='email'>Email</option>
                        </select>
                    </th>
                    <th>junk</th>
                    <th>junk</th>
                    <th>junk</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='col_hideable'>
                        <div class='col_nick_name col_hideable'>nickname 1</div>
                        <div class='col_full_name'>fullname 1</div>
                        <div class='col_email'>email 1</div>
                    </td>
                    <td> junk 1-2 </td>
                    <td> junk 1-3 </td>
                    <td> junk 1-4 </td>
                </tr>
                <tr>
                    <td class='col_hideable'>
                        <div class='col_nick_name'>nickname 2</div>
                        <div class='col_full_name'>fullname 2</div>
                        <div class='col_email'>email 2</div>
                    </td>
                    <td> junk 2-2 </td>
                    <td> junk 2-3 </td>
                    <td> junk 2-4 </td>
                </tr>
                <tr>
                    <td class='col_hideable'>
                        <div class='col_nick_name'>nickname 3</div>
                        <div class='col_full_name'>fullname 3</div>
                        <div class='col_email'>email 3</div>
                    </td>
                    <td> junk 3-2 </td>
                    <td> junk 3-3 </td>
                    <td> junk 3-4 </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

添加于2011-08-15 13:30

要在代码中实现此功能，您需要在 head-tag 中添加数千行

    <script>
        function select_column(column_name)
        {
            document.getElementById('column_style').textContent = '.col_hideable div.col_' + column_name + ' {display: block;}';
        }
    </script>
    <style id='column_style'>
        .col_hideable div.col_nick_name {display: block;}
    </style>
    <style>
        TH, TD {border: solid gray 1px;}
        .col_hideable div {display: none;}
    </style>

并替换表头代码

$participants .= "<tr>";
$participants .= "<th>Nickname</th><th>Time (Hours &amp; Mins)</th><th>Average Effort</th><th>Calories</th><th><img src='../images/mepslogo.png' /></th>";
$participants .= "</tr>";

与

$participants .= "<tr>";
$participants .= "  <th>";
$participants .= "    <select id='column_selector' onchange='select_column(this.value)'>";
$participants .= "      <option value='nick_name'>Nickname</option>";
$participants .= "      <option value='full_name'>Full name</option>";
$participants .= "      <option value='email'>Email</option>";
$participants .= "    </select>";
$participants .= "  </th>";
$participants .= "  <th>Time (Hours &amp; Mins)</th>";
$participants .= "  <th>Average Effort</th>";
$participants .= "  <th>Calories</th>";
$participants .= "  <th><img src='../images/mepslogo.png' /></th>";
$participants .= "</tr>";

并替换表体代码

if ($include == 1)
{
    $participants .= "<tr><td>" . $grow['usrNickname'] . "</td><td>" . FormatTime($pDuration) . "</td><td>$pAverageEffort</td><td>" . floor($pCalories) . "</td><td>$pPoints</td></tr>";
}

与

if ($include == 1)
{
    $participants .= "<tr>";
    $participants .= "  <td class='col_hideable'>";
    $participants .= "    <div class='col_nick_name'>" . $grow['usrNickname'] . "</div>";
    $participants .= "    <div class='col_full_name'>" . $grow['usrFullname'] . "</div>";
    $participants .= "    <div class='col_email'>" . $grow['usrEmail'] . "</div>";
    $participants .= "  </td>";
    $participants .= "  <td>" . FormatTime($pDuration) . "</td>";
    $participants .= "  <td>" . $pAverageEffort . "</td>";
    $participants .= "  <td>" . floor($pCalories) . "</td>";
    $participants .= "  <td>" . $pPoints . "</td>";
    $participants .= "</tr>";
}