个人中心
gpt4 book ai didi

javascript - JQuery 添加 "scrolling"按钮并在有新数据可用时刷新主页？

转载 作者：太空宇宙 更新时间：2023-11-04 04:17:10 27 4
gpt4 key购买 nike

我正在尝试执行以下操作:

  • 1 - 更新 index.html内容来自 output.html使用 jquery(仅在数据不同时更新，如果可能的话想办法更新已更改的部分？

  • 2 - 在“左”和“右”标题中引入两个按钮，以便能够在表格中左右滚动。

我已经进行了很多尝试让它工作，但我无法让它继续，下面是我尝试的第 1 步的副本(更新 index.html 使用来自 output.html 的新内容

主 HTML (index.html) 试图调用辅助 HTML (output.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Website</title>
    <style type="text/css">
        <!-- @import url("nstyle.css");
        -->
    </style>
    <script>
        update_content()
         $(document).ready(function (e) {
            var refresher = setInterval("update_content();", 250);
        })
        function update_content() {
            $.ajax({
                type: "GET",
                url: "testoutput.html",
                timeout: 10000,
                cache: false,
            })
                .done(function (page_html) {
                    var currentDoc = document.getElementById("container");
                    if (page_html != currentDoc.innerHTML) {
                        var newDoc = document.getElementById("container");
                        newDoc.innerHTML.write(page_html);
                        newDoc.close();

                    }
                });
        }
    </script>
</head>
<body>
    <div id="header_container">
        <div id="header">
            <a href="http://website.com/" target="_blank">
                <img src="logo.png">
            </a>
        </div>
    </div>
    <div id="container"></div>
    <div id="footer_container">
        <div id="footer">
            <a href="http://website.com/" target="_blank">
                <img src="logo.png">
            </a>
            <div id="footer1">
                <i>Copyright &copy; 2013 <a href="http://website.com/" target="_blank"><font color=blue>Website</font></a>.</i>
            </div>
            <div id="footer2">
                <i>All Rights Reserved.</i>
            </div>
        </div>
    </div>
</body>
</html>

二级 HTML (output.html)

    <table id="gradient" summary="">
        <tbody>
            <thead>
                <tr>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                </tr>
            </thead>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <thead>
                <tr>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                </tr>
            </thead>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
            <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        </tbody>
    </table>

CSS

body {
    line-height: 1.6em;
    background-color: #0E4216;
    width: 3200px;
    overflow-x: scroll;
}

#gradient {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 0px;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

#gradient th {
    font-size: 13px;
    font-weight: normal;
    padding: 10px;
    background: #FFFFFF url('images/gradhead.png') repeat-x;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #ffffff;
}

#gradient td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    color: #00000;
    border-top: 1px solid #fff;
    background: #57935e url('images/gradback.png') repeat-x;
}

#gradient tfoot tr td {
    background: #e8kkff;
    font-size: 12px;
    color: #99c;
}

#gradient tbody tr:hover td {
    background: #d0defd url('images/gradhover.png') repeat-x;
    color: #339;
}

body {
    margin: 0;
    padding: 0;
}

#header_container {
    background: #0E4216 url('images/gradhead.png') repeat-x;
    border: 0px solid #666;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header {
    line-height: 60px;
    margin: 0 auto;
    width: 940px;
    text-align: center;
}

#container {
    margin: 0 auto;
    overflow: auto;
    padding: 80px 0;
    width: 100%;
}

#content {
}

#footer_container {
    background: #0E4216 url('images/gradhead.png') repeat-x;
    border: 0px solid #666;
    bottom: 0;
    height: 95px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer {
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 100%;
    text-align: center;
    color: #ECECEC;
}

#footer1 {
    position: absolute;
    width: 130%;
    top: 50px;
}

#footer2 {
    position: absolute;
    width: 110%;
    top: 70px;
}

制作原始html页面的功能

def get_html_table(data):
    s = """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>website data</title>
<style type="text/css">
<!--
@import url("nstyle.css");
-->
</style>
</head>
<body>
<div id="header_container">
    <div id="header">
        <a href="http://website.com/" target="_blank"><img src="http://www.website.com/logo.png"></a>
    </div>
</div>
<div id="container">
    <table id="gradient-style" summary="">
        <tbody>
            <thead>
                <tr>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                </tr>
            </thead>\n"""
    for row in data:
        if not row:
            s += """            <thead>
                <tr>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data</th>
                    <th scope="col">data data data</th>

                </tr>
            </thead>\n"""
        else:
            s += '        <tr>'
            for counter, cell in enumerate(row):
                if counter == 6:
                    s += r'<td><div align="left">{}</div></td>'.format(cell)
                else:
                    s += r'<td>{}</td>'.format(cell)
            s += '<tr>\n'
    s += """        </tbody>
    </table>
</div>
<div id="footer_container">
    <div id="footer">
        <a href="http://website.com/" target="_blank"><img src="http://www.website.com/logo.png"></a>
        <div id="footer1">
            <i>Copyright &copy; 2013 <a href="http://website.com/" target="_blank"><font color=blue>website</font></a>.</i>
        </div>
        <div id="footer2">
            <i>All Rights Reserved.</i>
        </div>  
    </div>
</div>
</body>
</html>"""
    return s

data变量示例:

[['data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data'], '', ['data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data']['data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data', 'data']]

显然上面的代码是可以修改的

有人有什么想法吗？将不胜感激。
我会在两天内为此增加赏金，所以如果有人能解决这个问题，我会在我可以设置它时奖励你 :)

最佳答案

试试这个:-

分离您用于生成 html 文件的服务器端脚本或机制，以创建更新的新内容 newoutput.html来自您用来创建 output.html 的那个(将 output.html 视为用户第一次访问该页面或在导航到同一域中的其他页面后返回时在浏览器中加载的页面)。同样使用两个不同的函数来加载整个文档，即 output.html。和其他将在 250 毫秒间隔后调用的。这将减少更改整个 html 文档的工作量，因为它是唯一需要每 250 毫秒更新一次的表格。 output.html可以包含整个文档 ( <html>..</html> ) 但第二个脚本应该写 innerHtml of #container 的片段仅(假设 <div id="container"><table id="gradient" sumary=""></table></div> )，在 newoutput.html 中

createNewOutput.php生成的newoutput.html内容:-

<table id="gradient" summary="">
    <tbody>
        <thead>
            <tr>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
            </tr>
        </thead>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <thead>
            <tr>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data data</th>
                <th scope="col">data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data</th>
                <th scope="col">data data data</th>
            </tr>
        </thead>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
        <tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td>&nbsp;</td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>&#163;45552.43</td><td></td><td>data</td><td>data</td><tr>
    </tbody>
</table>

然后在您的 javascript 中进行一些更改代码

 load_content()  //loads output.html
     $(document).ready(function (e) {
        var refresher = setInterval(function(){update_content();}, 250);
    })

function update_content()
{
  $.ajax({
   url: 'createNewOutput.php',
   success:function(){
   $.get('newoutput.html',function(data)
   {
      if(data!=$('body #container').html())
      {
        $.when( $('body #container').empty().append(data) ).then(

        //if styling is not visible on dynamically added content add css here for example

       #gradient.css({
          font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
          font-size: 12px;
          margin: 0px;
          width: 100%;
          text-align: center;
          border-collapse: collapse;
       });

      //..and so on......
      ) //end of then
      } //end of if
   }) //end of get
  } //end of success
})//end of ajax
}//end of update_content

如果预计整个表格会发生变化，但如果只有少数元素预计会发生变化(例如表格第二行中的数据)，则此解决方案是合适的，您可以使用服务器端脚本从数据库返回一些有限的数据以说 json 的形式或简单 text然后对其进行解析(如果是 json)并将其与目标元素的 innerHTML 进行比较。

关于javascript - JQuery 添加 "scrolling"按钮并在有新数据可用时刷新主页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19741834/

27 4 0
文章推荐： javascript - 样式 <input type ="range"> 用于重定向不适用于触摸设备
文章推荐： python - 模块 'selenium.webdriver' 没有属性 'get'
文章推荐： python - 什么时候应该使用 tf.train.BytesList、tf.train.FloatList 和 tf.train.Int64List 将数据存储在 tf.train.Feature 中？
文章推荐： css - z-index = 1 和固定的 div 位置不起作用
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com