Question

首先，大家好，我是新来的。

为了总结我的问题，我阅读了要在表格中显示的XML文件的内容。执行此操作的基本功能很有效，我创建了一个派生函数，以包含与输入字段相关的搜索过滤器。搜索算法效果很好，我可以使用alert（）函数预览搜索结果的HTML代码，这段代码似乎正确，可以在浏览器中正确显示。但是相关div的innerHTML代码没有更新...... 我很感激任何人都可以提供的任何输入或解决方案，因为我一直坚持这个！谢谢！

以下是代码：

    function printListMod2(){
    //Search parameters ?
    var searchContent = document.getElementById("searchField").value;
    var i=0;

    newHTML = "<table id=\"tableInstrus\">";
    for (i=0;i<listInstrus.length;i++){
        filename = returnFilename(i);
        title = returnTitle(i);
        tempo = returnTempo(i);
        sample = returnSample(i);
        multi = returnMulti(i);
        style1 = returnStyle1(i);
        style2 = returnStyle2(i);

        var regEx = new RegExp(searchContent, 'gi');
        var resultSearch = title.match(regEx);
        if(resultSearch!=null){
            if(i%2==0){
                newHTML += "<tr class=\"tr0\"><td class=\"idColumn\">"+(i+1)+"</td><td class=\"emptyColumn\"></td><td class=\"nameColumn\">"+title+"</td><td class=\"tempoColumn\">"+tempo+"</td><td class=\"sampleColumn\">"+sample+"</td><td class=\"multiColumn\">"+multi+"</td><td class=\"styleColumn\">"+style1+"</td><td class=\"styleColumn\">"+style2+"</td><td class=\"addLink\"><a id="+filename+" onclick=\"addLinkToPlaylist("+i+")\"><img title=\"Add to playlist\" class=\"addButton\" src=\"images/buttonAdd.png\"/></a></td><td class=\"playLink\"><a onclick=\"playTrack("+i+","+true+")\"><img title=\"Play this track\" class=\"playButton\" src=\"images/buttonPlaySmall.png\"/></a></td></tr>";
            }
            else{
                newHTML += "<tr class=\"tr1\"><td class=\"idColumn\">"+(i+1)+"</td><td class=\"emptyColumn\"></td><td class=\"nameColumn\">"+title+"</td><td class=\"tempoColumn\">"+tempo+"</td><td class=\"sampleColumn\">"+sample+"</td><td class=\"multiColumn\">"+multi+"</td><td class=\"styleColumn\">"+style1+"</td><td class=\"styleColumn\">"+style2+"</td><td class=\"addLink\"><a id="+filename+" onclick=\"addLinkToPlaylist("+i+")\"><img title=\"Add to playlist\" class=\"addButton\" src=\"images/buttonAdd.png\"/></a></td><td class=\"playLink\"><a onclick=\"playTrack("+i+","+true+")\"><img title=\"Play this track\" class=\"playButton\" src=\"images/buttonPlaySmall.png\"/></a></td></tr>";
            }
        }
    }
    newHTML += "<tr><td class=\"idColumn\"></td><td id=\"emptyColumn\"></td><td class=\"nameColumn\"></td><td class=\"tempoColumn\"></td><td class=\"sampleColumn\"></td><td class=\"multiColumn\"></td><td></td><td></td></tr>";
    newHTML += "</table>";
    alert(newHTML); //this displays the HTML code properly
    document.getElementById("listDiv").innerHTML = newHTML; //this doesn't seem to do anything...
}

Answer 1

您的脚本是在文档加载完成之前执行的吗？然后它找不到#listDiv，因为div还不存在。

我会检查javascript控制台输出是否有错误，并检查以下代码是否未返回undefined：

{
  ...
  console.log( document.getElementById('listDiv') );
}

innerHTML没有更新显示

1 个答案: