Fatal编程技术网
  • javascript/
  • Javascript JQuery添加"；滚动；按钮，以便在有新数据可用时刷新主页面？

Javascript JQuery添加"；滚动；按钮，以便在有新数据可用时刷新主页面？

javascript jquery html css

Javascript JQuery添加"；滚动；按钮，以便在有新数据可用时刷新主页面？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在努力做到以下几点： 1-使用jquery使用output.html中的内容更新index.html（仅在数据不同时更新，如果可能，找到更新已更改部分的方法 2-在标题中引入两个“左”和“右”按钮，以便能够在表格上左右滚动 我曾多次尝试让它工作，但我无法让它运行，下面是我尝试的步骤1（使用output.html中的新内容更新index.html）的副本 试图调用辅助HTML（output.HTML）的主HTML（index.HTML） 函数生成原始html页面的原因 显然，上面的代码位是

我正在努力做到以下几点：

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

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

我曾多次尝试让它工作，但我无法让它运行，下面是我尝试的步骤1（使用
output.html
中的新内容更新
index.html
）的副本

试图调用辅助HTML（output.HTML）的主HTML（index.HTML） 函数生成原始html页面的原因 显然，上面的代码位是可以修改的

有人有什么想法吗？非常感谢您的帮助。
我将在两天内为此添加一笔赏金，因此，如果有人能够解决此问题，我将在我可以设置赏金时奖励您：）

尝试以下方法：-

将用于生成html文件以创建更新的新内容（即
newoutput.html
）的服务器端脚本或机制与用于创建
output.html
（当用户第一次访问该页面或导航到同一域上的其他页面后返回时，将output.html视为浏览器中加载的页面）。类似地，使用两个不同的函数，一个用于加载整个文档，即
output.html
，另一个将在250毫秒后调用。这将减少更改整个html文档的工作量，因为这是每250毫秒后需要更新的唯一表。
output.html
可以包含ole文档（
。
）但是第二个脚本应该只在
newoutput.html
中编写容器的
内部html片段（假设
）



由createNewOutput.php生成的newoutput.html的内容：-




如果需要对整个表进行更改，则此解决方案是合适的，但如果只有少数元素需要进行更改，例如表的第二行中的数据，则可以使用服务器端脚本以say
json
或simple
text
的形式从数据库返回一些有限的数据，然后对其进行解析（对于json）并将其与目标元素的内部html进行比较。
为什么要在
output.html
中创建整个html文档，包括
，等等。
。相反，您可以创建一个片段，即body
的内容。…
，因为起初我不打算对其进行更新，但现在我需要对其进行更新，但是是的，我可以改变这一点，这样我就只有正文的内容了。@UDB我添加了一些代码，这是我根据我认为您的意图尝试的……但仍然不起作用。数据是否只得到append？或者output.html中的数据是否可以覆盖以前获取的信息？我认为如果不在seco中输出html，您可以使这项任务变得更加容易谢谢你的回复，我会尝试一下。我不确定如何创建一个脚本来创建JSON文件，因为我创建HTML的代码基本上是基于一个更新的CSV文件生成的，可以有一个单元格改变，整张表。更改、删除行或更新整列。列0、1和2如果合并为字符串，则绝对不会更改，因此它们可以是唯一的标识符（行/行有时可能会被删除）我完全无法以任何方式或形式使其工作。我不确定如何使我的原始任务创建json，我添加了生成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>



    <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>



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;
}



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



<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>



 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