javascript 如何通过单击菜单(或另一个表)中的类别将页面包含在表中?

bvuwiixz  于 2023-01-01  发布在  Java
关注(0)|答案(4)|浏览(137)

我有以下两个表和一个脚本,其中包含一个函数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>
<table id="2">
    
</table>
<script language="javascript">
            
    function loadPage(){
        //if (document.getElementById('choice1')
        //      {
        //          <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
        //      }
    }
      
    </script>
e5nszbig

e5nszbig1#

您可以在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";
 }
bzzcjhmw

bzzcjhmw2#

如果您确定遵循以下方法
单击表1--〉行1--〉显示--〉表A中的Page1.html
单击表1--〉行2--〉显示--〉表B中的Page2.html
当年龄增加时,这种设计导致更多的表。
最好用这种风格。
单击表1--〉行1--〉显示--〉表A中的Page1.html
单击表1--〉行2--〉显示--〉表A中的Page2.html
问题是在TABLE-A中放置一个IFRAME,当单击ROW 1或ROW 2或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>
mfpqipee

mfpqipee3#

另一种方法是进行 AJAX 调用以请求内容,并将其放置在表中,设置innerHTML属性。
对于 AJAX 调用,您可以使用各种库,我个人推荐jquery和dojotoolkit。

ukxgm1gy

ukxgm1gy4#

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

相关问题