javascript - 遍历我的sql结果并循环显示-6ren

javascript - 遍历我的sql结果并循环显示

转载作者：行者123 更新时间：2023-11-30 21:48:20

我试图让“标题”和“内容”的结果一次显示一个，然后循环淡入淡出到下一个结果。目前，它一次显示所有结果，然后淡入和淡出，然后再次显示所有结果。关于如何让他们一次显示一个 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>

最佳答案

你的做法是错误的。

这不是一个完整的解决方案。我会尽力让您了解自己这样做背后的逻辑。

遍历结果但不是立即回显它们，而是将它们保存在数组中:

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

循环后，只回显第一个结果。将一些 ID 添加到您的 <h1>和 <td>当你在做的时候。您稍后会需要它们。

然后将数组传递给 JavaScript:

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

现在您在 JS 中有了数组，您必须遍历它们并为每个值更改 <h1> 的内容和 <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];
}

你可能会扔掉你的 fadeIn() , delay()和 fadeOut()在这个循环中，达到你想要的结果!

最后，删除你的for并将这个放在$(document).ready()里面.

关于javascript - 遍历我的sql结果并循环显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48423473/

文章推荐： c# - Json.NET 未能将 Json 反序列化为仅字段类

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 遍历我的sql结果并循环显示