Question

我有一个包含三个表格的页面（表A，表B，表C），我想根据用户点击的按钮显示这些表格。我可以使用以下脚本完成此操作：

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none"; }

btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none"; }

btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table"; }

但是，我还希望将这些表的html代码包含在此页面中。我也可以使用以下脚本执行此操作：

$(function(){   $("#include-tables").load("P1/1_0/table.html"); });

那说我不能让这些一起工作。例如，当我将所有这些结合起来时 - 请参阅下面的示例代码 - 我的表格已包含在内，但按钮不再有效。如果我在浏览器中检查错误日志，它会显示Null is not a object，因此我认为问题是由于所有变量和Id在按钮代码执行之前被定义。这说明我对javascript的知识非常有限，但我无法弄清楚如何解决这个问题。

＆＃13;

$(function(){
	$("#include-tables").load("/1_0/tables.html");
});

var tableA = document.getElementById("tableA");
var tableB = document.getElementById("tableB");
var tableC = document.getElementById("tableC");

var btnTabA = document.getElementById("showTableA");
var btnTabB = document.getElementById("showTableB");
var btnTabC = document.getElementById("showTableC");

btnTabA.onclick = function () {
    tableA.style.display = "table";
    tableB.style.display = "none";
    tableC.style.display = "none";
}
btnTabB.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "table";
    tableC.style.display = "none";
}
btnTabC.onclick = function () {
    tableA.style.display = "none";
    tableB.style.display = "none";
    tableC.style.display = "table";
}

＆＃13;

#tableA {
}

#tableB {
    display: none;
}

#tableC {
    display: none;
}

＆＃13;

<div id="include-tables"></div>
	
<div class="button-div">
	<input type="button" id="showTableA" value="TableA">
	<input type="button" id="showTableB" value="TableB">
	<input type="button" id="showTableC" value="TableC">
</div>

<script src="script.js"></script>

＆＃13;

Answer 1

.load()是异步的，因此在完成后才能访问这些元素。将所有代码放入其回调函数中。

$(function(){
    $("#include-tables").load("/1_0/tables.html", function() {
        var tableA = document.getElementById("tableA");
        var tableB = document.getElementById("tableB");
        var tableC = document.getElementById("tableC");

        var btnTabA = document.getElementById("showTableA");
        var btnTabB = document.getElementById("showTableB");
        var btnTabC = document.getElementById("showTableC");

        btnTabA.onclick = function () {
            tableA.style.display = "table";
            tableB.style.display = "none";
            tableC.style.display = "none";
        }
        btnTabB.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "table";
            tableC.style.display = "none";
        }
        btnTabC.onclick = function () {
            tableA.style.display = "none";
            tableB.style.display = "none";
            tableC.style.display = "table";
        }
    });
});

或者您可以使用事件委派将事件处理程序绑定到动态添加的元素。见Event binding on dynamically created elements?

包含到页面后使用Javascript命令

1 个答案: