0

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

  • 1 -使用 jquery 更新index.html内容output.html（仅在数据不同时更新，如果可能的话找到更新已更改部分的方法？

  • 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']]

显然上面那段代码可以修改

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

4

1 回答 1

2

尝试这个：-

将您用于生成 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 进行比较。

于 2013-11-02T20:07:13.227 回答