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内写一个包含文件？

Answer 1

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

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

Answer 2

You can send AJAX from page to load file

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

if you have jquery on your page use it

<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. or preload file & name and show/hide them

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

with 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内容？

2 个答案: