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

Question

我有一个包含不同 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里面写一个include文件？

Answer 1

您不能使用 JavaScript 将服务器端代码插入 DOM。在将结果传送到浏览器之前，服务器端代码需要由服务器上适当的运行时/解释器执行。

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

Answer 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. 或预加载文件和名称以及 show/hide 它们

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

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

How to overwrite td content with an include file with JS?

html

javascript

jsp

include