Question

在我的jsp页面中，我想列出具有相应图像的目录中的所有文件名和子文件夹名称。当它是文件时，显示文件图像;当它是一个子文件夹时，显示一个文件夹图像。列出文件名和子文件夹名后，单击文件时，jsp页面显示文件的内容;双击子文件夹名称时，jsp页面将显示当前目录中的文件名和子文件夹名称。屏幕截图如下：

显示文件名和子文件夹名称的代码部分如下：

<% File directory = new File(var_path);
        if (directory.isDirectory()) {
            File[] list = directory.listFiles();
            for (int i = 0; i < list.length; i++) {
                if(list[i].isDirectory()) {
                    out.print("<TR> <TD ondblclick=list_files("+i+") id="+i+"><img src="+ "/brt-example/images/folder.png />"+list[i].getName()+"</TD></TR>");  
                }else{
                    out.print("<TR><TD onclick=show_file_content("+i+") id="+i+"><img src="+ "/brt-example/images/book.png />"+list[i].getName()+"</TD></TR>"); 
                }
            }
        }
    %>

然后，我根据onclick或双击事件调用相应的javascript函数。以onclick事件为例，代码部分如下：

<script type="text/javascript">
function show_file_content(id)
        {

                    var id = id;
                    document.getElementById(id).onclick = function()
                    {
                      var file_name = document.getElementById (id).innerHTML;
                      alert(file_name);
                    }
         }
</script>

但警告信息框显示我＆＃34;＆lt; img src =＆＃34; /brt-example/images/book.png"＆gt; postgreSQL.rptdesign＆＃34; 。实际上，我只想获得＆＃34; postgreSQL.rptdesign＆＃34;。单击文件名时，如何只读取没有图像标签的文件名？你能给我一些建议吗？非常感谢提前。

Answer 1

您正在寻找.innerText。

替换var file_name = document.getElementById (id).innerHTML;

至var file_name = document.getElementById (id).innerText;

实施例

<div>
    <img src="url_to_img" /> And text too
</div>
<hr />
<button onclick="alert(document.querySelector('div').innerHTML);">alert div.innerHTML</button>
<button onclick="alert(document.querySelector('div').innerText);">alert div.innerText</button>

jQuery版

您可以使用.text()功能。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <img src="url_to_img" /> And text too
</div>
<hr />
<button onclick="alert($('div').html());">alert $(div).html()</button>
<button onclick="alert($('div').text());">alert $(div).text()</button>

Answer 2

适用于＆＃34; textContent＆＃34;属性。我替换了代码：

var file_name = document.getElementById (id).innerHTML;

with：

var file_name = document.getElementById (id).textContent;

它运作正常。

谢谢你们所有人！

我们如何在有图像的情况下正确使用javascript中的innerHTML值？

2 个答案: