javascript - 从javascript加载列表标签中的数据

Question

我正在创建一个表格，点击输入字段即可。那是完美的。现在我想用列表替换表格。我可以用 HTML 来做，但不能通过 Javascript 来做。你能帮我找到路吗？

我的表格创建。 (注意表格点击输入)

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) {
                // trigger your callback function
                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";
                }
            }
        }
    }
}

这里我尝试通过 Html 创建，我想通过 js 创建。想要动态加载列表中的数据。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
</script>

你能帮我在第二个代码中通过javascript动态加载数据吗？

Answer 1

这是创建动态列表的方法。

HTML(仅用于输出 View )

<div id="output"></div>

JavaScript

function myFunction(dataSet,container) {
  var ul = document.createElement("ul");

  for (var i = 0; i < dataSet.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = dataSet[i]
    ul.appendChild(li)

    // if it's the last iteration
    if (i == (dataSet.length - 1)) {
      container.appendChild(ul)
    }
  }
}
var dataSet = ['data1', 'data2', 'data3']
var container = document.getElementById('output');
myFunction(dataSet, container)