onclick事件中的表标记未打开

Question

我创建了一个输入字段，它基本上用作Multiselect组合框（我想在纯Javascript中完成）。所以点击输入字段，我打开一个表，（Option标签会更好，但我在这里使用表格。）

我遗失的东西，因此我无法打开桌子。你能帮我解决一下这里缺少的东西吗？

我的工作代码不正常。 JS

MyCombo = function(args) {
    debugger;
    var dataUrl = args.url;
    var divID = args.divID;
    var div = document.getElementById(divID); 

    var input = document.createElement("input");
        input.type = "text";
        input.id = "textfield";

    var divTrigger = document.createElement("div");
        divTrigger.id = "triggers";

    var  crossImage = document.createElement("img");
    var  dropImg = document.createElement("img");
         crossImage.className = "trigger";
         dropImg.className = "trigger";
         crossImage.src = "css/delete.png";
         dropImg.src = "css/combo_arrow.png";
         crossImage.id = "arrow";
         dropImg.id = "cross";
         crossImage.onclick = deleteValue;
         dropImg.onclick = DropDownExpand;
        divTrigger.appendChild(crossImage);
        divTrigger.appendChild(dropImg);

    div.appendChild(input);
    div.appendChild(divTrigger);
    var dropDownTable = document.createElement('table');
    dropDownTable.id = "myTable";
    var headerTr = document.createElement('tr');
    headerTr.className = 'header';
    var innerTr = document.createElement('tr');
    var innerTd = document.createElement('td');
    innerTr.appendChild(innerTd);
    dropDownTable.appendChild(headerTr);
    dropDownTable.appendChild(innerTr);
    div.appendChild(dropDownTable);


    function foo(callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', "data.json", true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }

    foo(function(data) {
        var jsonc = JSON.parse(data);
        var new_opt = "";
        for (i = 0; i < jsonc.length; i++) {
            new_opt += '<tr><td>' + jsonc[i]['VALUE'] + '</td></tr>';
        }
        document.getElementById('myTable').innerHTML = new_opt;
        document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
            _tr.addEventListener('click', function() {
                document.getElementById('textfield').value += " ; " + this.getElementsByTagName('td')[0].textContent;
            });
        });
    });

}
 function DropDownExpand(){
    var input, filter, table, tr, td, i;
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
}
function deleteValue(){
    debugger;
}

另一个想法是工作文件。这是我的代码。

我的工作代码 JS

MyCombo = function(args) {
    var dataUrl = args.url;
    var divID = args.divID;
    var div = document.getElementById(divID);
    var myTable = '<input type="text" class="Autocombo-combobox"; style="width:30%;" id="myInput" onkeyup="myFunction()" title="Type in a name">' +
        '<table id="myTable">' + '<tr class="header"></tr>' + '<tr><td></td></tr>' + '</table>';
    div.innerHTML = myTable;

    function foo(callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', "data.json", true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }




    foo(function(data) {
        var jsonc = JSON.parse(data);
        var new_opt = "";
        for (i = 0; i < jsonc.length; i++) {
            new_opt += '<tr><td>' + jsonc[i]['VALUE'] + '</td></tr>';
        }
        document.getElementById('myTable').innerHTML = new_opt;
        document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
            _tr.addEventListener('click', function() {
                document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent;
            });
        });
    });

    myFunction = function() {
        debugger;
        var input, filter, table, tr, td, i;
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
}

我发现这两者之间差别不大。但在第一个问题上仍有一些问题。能帮助我理解吗。