dousilie9522 2018-01-24 13:18
浏览 62

迭代我的sql结果并在循环中显示

I am trying to get the result from "headline" and "content" to show up one at a time and then fade in and out to the next result in a loop. Currently, it shows all the results at once and the fades in and out and then show all the results again. Any idea on how to get them to show one at a time TIA

<html>
    <head>
        <style>
            #table1{/*table aspects and design */
            border:1px solid #FFFFFF;
            background:#FFFFFF;
            display:none;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }

        th{/*align table headers*/
            text-align:center;
        }
        td,th{
            border:1px solid #FFFFFF;
            text-align:center;
        }
    </style>
</head>

<table id="table1" cellpadding="5" cellspacing="1" width="50%">
    <? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
    {
/* select all information from the table and take it into the page  */
    $query->execute(); 
    while ($result = $query->fetch(PDO::FETCH_ASSOC)){
        $head = $result['headline'];/*puts result of headline from table into variable*/
        $content = $result['content'];
        /*puts result of content from  table into variable*/
        echo /* echo the table to display announcements*/'
        <tr>
            <th>
                <h1>
                    '.$head.'
                </h1>
            </th>
        </tr>
        <tr>
            <td>
                <font size="4">
                    '.$content.'
                </font>
            </td>
        </tr>';

     }
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/

$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}  
)};
</script>
  • 写回答

1条回答 默认 最新

  • douyimin1083 2018-01-25 06:11
    关注

    You're going about this the wrong way.

    This won't be a complete solution. I'll try to hopefully make you understand the logic behind doing this yourself.

    Loop through the results but instead of echoing them immediately, save them in arrays:

    <?php
$head[] = $result['headline'];
$content[] = $result['content'];
?>

    After the loop, only echo the first results. Add some IDs to your <h1> and <td> while you're at it. You'll need them later.

    Then pass the arrays to JavaScript:

    <script type="text/javascript">
    var head = '<?= json_encode($head); ?>';
    var content = '<?= json_encode($content); ?>';
</script>

    Now that you have the arrays in JS, you have to iterate through them and for each value, change the content of your <h1> and <td>:

    for (var i = 0, len = head.length; i < len; i++)
{
    document.getElementById("H1_element_ID").innerHTML = head[i];
    document.getElementById("TD_element_ID").innerHTML = content[i];
}

    You can probably throw your fadeIn(), delay() and fadeOut() in this loop, to achieve your desired result!

    Finally, delete your for and put this one inside $(document).ready().

    评论

报告相同问题？

悬赏问题

  • ¥15 mmocr的训练错误，结果全为0
  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀