Как включить страницу в таблицу, щелкнув категорию в меню (или в другой таблице)?

Question

У меня есть следующие 2 таблицы и скрипт, имеющий функцию includePage (). Таблица с id = 1 содержит меню, тогда как таблица с id2 пуста. Он просто содержит одну ячейку.

Теперь я хочу, чтобы, когда пользователь нажимал на первую опцию в меню таблицы, имеющей id = 1, dummypage1.html мог появиться в таблице, имеющей id = 2. Аналогично, когда она щелкает по второму варианту меню таблицы с id = 1, в таблице может появиться dummypage2.html с id = 2.

Как именно можно сказать браузеру с помощью скрипта включить страницы в таблицу с id = 2? Пожалуйста, помогите.

<table id="1">
 <tr>
    <td id="choice1" onclick="loadPage()">Initialize Session</td></tr>
    <td id="choice2" onclick="loadPage()">Sessions Information</td></tr>  
 </tr>

<table id="2">

<script language="javascript">

    function loadPage(){
        //if (document.getElementById('choice1')
        //      {
        //          <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
        //      }
    }

    </script>

Answer 1

Вы можете передать параметр в функцию loadPage

<td id="choice1" onclick="loadPage(1)">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage(2)">Sessions Information</td></tr>  

<table id="2">
    <tr><td id="TD"></td></tr>
</table>
 <script>
   function loadPage(whatPage) {
        var url = (whatPage==1) ? "initSession.html" : "infoSession.html";
        document.getElementById('TD').innerHTML = '<iframe src="'+url+'" width="727px" height="416px"></iframe>';
   }
</script>  

ИЛИ

<table id="2"><tr><td><iframe src="about:blank" id="content" style='width:100%;height:100%;"/></td></tr></table>  

затем на JavaScript:

function loadPage(whatPage) {
   document.getElementById('content').src =  (whatPage==1) ? "initSession.html" :   "infoSession.html";
 }

Answer 2

С jQuery:

<table id="1">
 <tr>
    <td id="choice1">Initialize Session</td></tr>
    <td id="choice2">Sessions Information</td></tr>  
 </tr>

<table id="2">
    <tr><td></td></tr>
</table>

...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
    $(function() {
        $("#choice1,#choice2").click(loadPage);
    });

    function loadPage(){
        var id = $(this).attr("id");
        if(id === "choice1") {
            $("#2 td").load("initSession.html");
        } else if (id === "choice2") {
            $("#2 td").load("infoSession.html");
        }
    }
    </script>

Answer 3

Другой подход - сделать AJAX-вызов для запроса содержимого и поместить его в таблицу, задав свойство innerHTML.

Для вызовов AJAX вы можете использовать различные библиотеки, я лично рекомендую jquery и dojotoolkit.

Answer 4

Если вы уверены в следовании методологии

НАЖМИТЕ НА ТАБЛИЦУ 1 -> ROW1 -> отображает -> Page1.html в TABLE-A
НАЖМИТЕ НА ТАБЛИЦУ 1 -> ROW2 -> отображает -> Page2.html в таблице-B

этот вид проектирования приводит к увеличению количества таблиц, когда возраст увеличивается.

Лучше использовать этот стиль ...

НАЖМИТЕ НА СТОЛ1 -> ROW1 -> отображает -> Page1.html в TABLE-A
НАЖМИТЕ НА ТАБЛИЦУ 1 -> ROW2 -> отобразит -> Page2.html в TABLE-A

Дело в том, что поместите КАДР внутри ТАБЛИЦЫ-A и при нажатии на ROW1 или ROW2 или ROW-n установите целевой объект страницы на этот iframe.

<table>
        <tr>
            <td>
                <a href="http://www.google.com" target="myplace">Page1</a></td>
            <td>
                <a href="http://www.yahoo.com" target="myplace">Page2</a></td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <iframe style="width: 400px; height: 400px;" id="myplace" name="myplace"></iframe>
            </td>
        </tr>
    </table>