Javascriptを使用してHTMLコードをテーブルに読み込む方法は？

Question

ヘッダー（タイトルとメニュー）とコンテンツが配置されているテーブル（レイアウトを簡単にすることができるため）で構成されるシンプルなWebサイトを構築しています。問題は、カテゴリを変更するたびに（メニューのリンクをクリックするたびに）、読み込み中に短時間、サイト全体が白くなります。私はそれが欲しいので、これは起こらないので、ページ全体ではなく、テーブルの内容を読み込むだけです。私はフレームを使って簡単にこれを行うことができたと思いますが、すぐにサポートが中止されると言われました。これを行う方法はありますか？

当分の間、サイトはここにあるので、私が話している効果を見ることができます： http://bljak.org:1235/index.html。

また、私がPHPに精通していないため、サイトが単なるHTMLとJavascriptであったとしたら最高です（512MbのRAMを搭載したネットブックでコーディングしているので、そこ）。

Answer 1

私はjQueryのに基づいて道を与えるだろう - これは最も単純で短い方法です。

まず、最新のjQueryライブラリをダウンロードしてください - hereが見つかりました。

はjQueryライブラリ「を含む」するために、既存のHTMLコードに、このようなラインを持っている「jquery.min.js」あなたはあなたのローカルファイルに名前を付けるとします

<script type="text/javascript" src="jquery.min.js"></script> 

今、あなたが必要とするすべてはあなたのページでこのコードですそして、すれば完了です：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a").bind("click", function() { 
      var href = $(this).attr("href"); 

      //bust nasty browser AJAX cache: 
      href += "?nnn=" + parseInt(Math.random() * 1000000); 

      $("#Container").load(href); 
      return false; 
     }); 
    }); 
</script> 

は「身体」が含まれている必要があり、あなたのページの実際の要素のIDでコンテナを交換し、その後任意のリンクをクリックすると、リンク先のページがコンテナにロードされるようになりますフルページリロードなし。

コードはかなり簡単ですが、あなたがそれのどの部分を理解したいのか尋ねることは自由です。

jQueryは100K未満です。現代のインターネット速度では、本当に問題になるはずはありません。純粋なJavaScriptはもちろん可能ですが、クロスブラウザを維持するには頭痛の種がたくさんあります。

Answer 2

あなたはタグとその終了タグの間のテキストを書き換えるinnerHTMLプロパティを使用することができます。

<script type="text/javascript"> 
function changeText(){ 
    document.getElementById('tbl').innerHTML = '<table><tr><td>New Text</td></tr></table>'; 
} 
</script> 
<div id="tbl"></div> 
<input type="button" onclick="javascript:changeText()" value="Change Text"/>