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>

OR

<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

如果您确定遵循方法论

点击表1 - ＆gt; ROW1 - ＆gt;显示 - ＆gt;表-1中的Page1.html 点击表1 - ＆gt; ROW2 - ＆gt;显示 - ＆gt;表-B中的Page2.html

这种设计在年龄增长时会产生更多的表格。

更好地使用这种风格..

点击表1 - ＆gt; ROW1 - ＆gt;显示 - ＆gt;表-1中的Page1.html 点击表1 - ＆gt; ROW2 - ＆gt;显示 - ＆gt; TABLE-A中的Page2.html

事情是在TABLE-A中放置一个IFRAME，并在单击ROW1或ROW2或ROW-n时将thet page target设置为该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>

Answer 3

另一种方法是进行AJAX调用以请求内容，并将其放在表中设置innerHTML属性。

对于AJAX调用，您可以使用各种库，我个人推荐使用jquery和dojotoolkit。

Answer 4

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

如何通过单击菜单（或另一个表）中的类别来在页面中包含页面？

4 个答案: