如何用 JS 的包含文件覆盖 td 内容？答案

【问题标题】：How to overwrite td content with an include file with JS?如何用 JS 的包含文件覆盖 td 内容？
【发布时间】：2016-03-20 07:26:39
【问题描述】：

我有一个包含不同 htm 文件名称的菜单，如下所示：

我希望当我点击一个时，一个td的内容显示我刚刚点击的文档，我有一个用于列出这个名称的列表，并将调用设置为JS函数：

<% for (int i=0; i < fileNames.length; i++) { %>
    <tr> 
        <td onClick="refreshContent(this)"> <%= fileNames[i] %> </td>
    </tr>
<% } %>

我使用的是默认显示第一个文档内容的Jsp：

<td id="documentContaner">
    <%@ include file ="/docs/document1.htm" %>
</td>

我想在我的 JS 函数中添加这样的内容：

function refreshContent(element) {
    var name = element.textContent;
    var tdContaner = document.getElementById("documentContaner");
    tdContaner.innerHTML = '<%@ include file ="/docs/'+ name +'.htm" %>';
}

第一个问题：这样可以吗？或者我是否需要刷新页面才能显示新内容？第二个问题：如果可以的话，如何在TD里面写一个包含文件？

【问题讨论】：

标签： javascript html jsp include

【解决方案1】：

您不能使用 JavaScript 将服务器端代码插入 DOM。服务器端代码需要由服务器上相应的运行时/解释器执行，然后才能将结果传递给浏览器。

要实现这种效果，您需要编写一个 HTTP 端点，它返回 just 该单元格的内容，然后使用 Ajax（通常通过 XMLHttpRequest 对象）来获取它，然后使用 DOM 方法将结果插入到单元格中。

【讨论】：

【解决方案2】：

您可以从页面发送 AJAX 以加载文件

<script>
    function refreshContent(element) {
        var name = element.textContent;
        var xhr= new XMLHttpRequest();
        xhr.open('GET', '/docs/'+ name +'.htm', true);
        xhr.onreadystatechange= function() {
            if (this.readyState!==4) return;
            if (this.status!==200) return; // or whatever error handling you want
            element.innerHTML= this.responseText;
        };
        xhr.send();
    }
</script>
<table>
    <tr>
        <td onClick="refreshContent(this)">test</td>
    </tr>
</table>

如果您的页面上有 jquery，请使用它

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function () {
        $('#table-id').on('click', 'td.clickable', function (event) {
            event.preventDefault();
            var $element = $(this);
            var name = $element.text();
            $.get('/docs/'+ name +'.htm', function (response) {
                $element.html(response);
            })
        });
    })
</script>
<table id="table-id">
    <tr>
        <td class="clickable">test</td>
    </tr>
</table>

UPD. 或预加载文件和名称并显示/隐藏它们

<script>
    function refreshContent(element) {
        var name = element.children[0];
        var file = element.children[1];
        name.style.display = 'none';
        file.style.display = null;
    }
</script>
<table>
    <tr>
        <% for (int i=0; i < fileNames.length; i++) { %>
    <tr>
        <td onClick="refreshContent(this)">
            <div class="name"><%= fileNames[i] %></div>
            <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div>
        </td>
    </tr>
    <% } %>
    </tr>
</table>

使用 jquery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function () {
        $('#table-id').on('click', 'td.clickable', function (event) {
            var $element = $(this);
            var $name = $element.find('.name');
            var $file = $element.find('.file');
            $name.hide();
            $file.show();
        });
    })
</script>
<table id="table-id">
    <tr>
        <% for (int i=0; i < fileNames.length; i++) { %>
    <tr>
        <td class="clickable">
            <div class="name"><%= fileNames[i] %></div>
            <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div>
        </td>
    </tr>
    <% } %>
    </tr>
</table>

【讨论】：