Question

我有一个网站，我在一行显示两个表，一个到第二行。在表格上方，我有一个菜单，用户可以在其中选择显示的表格。问题是我在使用jquery函数div.remove; div.append; div.load没有任何反应 - 不显示新表。

HTML code：

    <div id="container_menu">
    <div id="menu1">
    <ul id="mainmenu">
    <li><a href="#">Choose the first map <i class="arrow"></i></a>
        <ul>
            <li class="div1clear" data-path="tables/cycling1_table.html"><a href="#">% of employees cycling to work</a></li>    
            <li class="div1clear" data-path="tables/white_british1_table.html"><a href="#">% of White British residents</a></li>
        </ul>
    </li>
</ul>
</div>  
    <div id="menu2">
    <ul id="mainmenu">
    <li><a href="#">Choose the second map <i class="arrow"></i></a>
        <ul>
            <li class="div2clear" data-path="contents/work/cycling2.html"  data-path2="tables/cycling2_table.html"<><a href="#">% of employees cycling to work</a></li>                 
            <li class="div2clear" data-path="contents/ethnic/white_british2.html" data-path2="tables/white_british1_table.html"><a href="#">% of White British residents</a></li>
        </ul>
    </li>
</ul>
</div>
</div>

    <div id="container_table">          
        <div id="table_div1"></div>
        <div id="table_div2"></div> 
    </div>

更改DIV的内容：

    <script type="text/javascript">
$(document).ready(function(){          
    $(".div1clear").click(function(){                           
            var tablePath = $(this).data("path2");                  
            $("#table_div1").remove();  
            $("#container_table").append("<div id='table_div1'></div>");    
            $('#table_div1').load(tablePath);       
        });

        $(".div2clear").click(function(){
            var tablePath2 = $(this).data("path2");                 
            $("#table_div2").remove();  
            $("#container_table").append("<div id='table_div2'></div>");    
            $('#table_div2').load(tablePath2);
        });     
});
    </script>

包含table_div1

内容的文件

            <script type="text/javascript">
            var table1;
            var newList1 = [];

    $.each(list, function(index, val) {
        table1 = {
           name: val.NAME,
           value: val.white_brit
        };
        newList1.push(table1);

    });

    var createdTable1;
    $.each(newList1, function(index, val) {
        createdTable1 += '<tr><td>' + val.name + '</td>';
        createdTable1 += '<td>' + val.value + '</td></tr>';
    });

$('#table_div1').html( createdTable1);
</script>

包含内容table_div2的文件：

<script type="text/javascript">
            var table2;
            var newList2 = [];

    $.each(list, function(index, val) {
        table2 = {
           name: val.NAME,
           value: val.cycling
        };
        newList2.push(table2);
    }); 

    var createdTable2;
    $.each(newList2, function(index, val) {
        createdTable2 += '<tr><td>' + val.name + '</td>';
        createdTable2 += '<td>' + val.value + '</td></tr>';  
        $('#table_div2').html( createdTable2);
    </script>

此外两个js代码包含两个表的内容我已放置在初始index.html文件中，并且在运行网站之后，两个表都以正确的方式显示，只有在我尝试更改表时才会发生任何事情。

你知道可能会出现什么问题吗？

提前致谢。

Answer 1

你肯定加载了JQuery吗？一定要有：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

在所有其他JavaScript代码之前，首先加载它。

我刚刚运行了您的代码，并且能够删除其中一个表。此外，请务必定义您的列表＆＃39;变量。我以为你刚把它从你的帖子中删了，但是在你的代码中有它。

然而，在交换方面，我认为你的tablePath返回undefined。

 var tablePath = $(this).data("path2");

上述行中this的定义是：

<li class="div1clear" data-path="tables/cycling1_table.html">
  <a href="#">% of employees cycling to work</a>
</li>

没有＆＃39; path2＆＃39;在其中定义。如果单击顶部的两行或底部的两行，可能有一个变量定义了您希望数据加载的位置。

使用jquery重新加载div内容

1 个答案: