자바 스크립트를 사용하여 테이블에 HTML 코드를로드하는 방법은 무엇입니까?

Question

헤더 (제목과 메뉴)와 내용이있는 표 (레이아웃을 더 쉽게 만들 수 있기 때문에)로 구성된 간단한 웹 사이트를 만들고 있습니다. 문제는 카테고리를 변경할 때마다 (메뉴의 링크 클릭) 전체 사이트가로드되는 동안 짧은 시간 동안 흰색이됩니다. 나는 이것이 일어나지 않도록하기를 원한다. 그래서 전체 페이지가 아닌 테이블의 내용 만로드하면된다. 나는 이것을 프레임을 사용하여 쉽게 할 수 있다고 생각하지만, 그들이 곧 지원을 중단 할 것이라고 말했고, 그것을 사용하는 것은 나쁜 습관이라고 들었다. 이것을 할 수있는 방법이 있습니까?

당분간이 사이트는 여기에 있습니다. 따라서 제가 말하는 효과를 볼 수 있습니다 : http://bljak.org:1235/index.html.

또한 내가 PHP에 익숙하지 않기 때문에 사이트가 HTML과 자바 스크립트 인 경우 가장 좋을 것입니다 (512MB의 RAM이 장착 된 넷북에서 코딩하므로 서버를 시작할 수는 없습니다). 그곳에).

Answer 1

내가 jQuery를 기반으로 방법을 제공합니다 - 이것은 가장 간단하고 짧은 방법입니다.

먼저, 최신 jQuery 라이브러리 - here을 다운로드하십시오. 이제 당신이 필요로하는 모든 페이지에서이 코드는

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

:

는 jQuery 라이브러리를 "포함"기존의 HTML 코드에서 같은 라인을 가지고 로컬 파일 "jquery.min.js을"이름을 가정 하면됩니다 :

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