0

私は次のことをしようとしています:

  • 1 - jqueryindex.htmlを使用してコンテンツを更新しoutput.htmlます (データが異なる場合のみ更新します。可能であれば、変更された部分を更新する方法を見つけますか?

  • 2 - テーブルを左右にスクロールできるように、ヘッダーに「左」と「右」の 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']]

明らかに、上記のコードは変更できます

誰にもアイデアはありますか？助けていただければ幸いです。
2 日以内に報奨金を追加するので、誰かがこれを修正できる場合は、設定できるようになったら報奨金を授与します :)

4

1 に答える 1

2

これを試して：-

更新された新しいコンテンツを作成するための html ファイルを生成するために使用しているサーバー側のスクリプトまたはメカニズムを、作成にnewoutput.html使用しているものから分離しますoutput.html(output.html を、ユーザーが最初にページにアクセスしたときにブラウザーに読み込まれるページと見なします)。または、同じドメインの他のページに移動した後に戻ってください。同様に、2 つの異なる関数を使用して、1 つはドキュメント全体をロードし、もう 1 つoutput.htmlは 250 ミリ秒の間隔の後に呼び出されます。これにより、html 全体を変更する作業負荷が軽減されます。これは、250 ミリ秒ごとに更新する必要がある唯一のテーブルであるためです。output.htmlドキュメント全体 ( ) を含めることができますが、2 番目のスクリプトは( と仮定して)<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

このソリューションは、テーブル全体の変更が予想される場合に適していますが、たとえばテーブルの 2 行目のデータなど、変更が予想される要素がほとんどない場合は、サーバー側スクリプトを使用して、データベースからいくつかの限定されたデータをフォームで返すことができます。 sayjsonまたは simpletextの、それを解析して (json の場合)、それをターゲット要素の innerHTML と比較します。

于 2013-11-02T20:07:13.227 に答える