调用ajax或放置静态JSON时，我的HTML表中没有显示下拉列表

Question

我有一个带下拉列表的HTML表。 我正在做的是点击一个按钮。 我正在显示有下拉列表的HTML表，但我遇到的问题是一个错误，它是：

TypeError：t为null; 无法访问其“setAttribute”属性

我正在使用Bootstrap4下拉列表。

这是我的代码：

 var currentlyClickedOutlet=""; $(document).ready(function() { $('#button').click(function() { var data = [{ "amount": 476426, "billdate": "2018-09-01", "outlet": "JAYANAGAR" }, { "amount": 92141, "billdate": "2018-09-01", "outlet": "MALLESHWARAM" }, { "amount": 115313, "billdate": "2018-09-01", "outlet": "KOLAR" }, { "amount": 511153, "billdate": "2018-09-02", "outlet": "JAYANAGAR" }, { "amount": 115704, "billdate": "2018-09-02", "outlet": "MALLESHWARAM" }, { "amount": 83597, "billdate": "2018-09-02", "outlet": "KOLAR" }, { "amount": 167421, "billdate": "2018-09-03", "outlet": "JAYANAGAR" }, { "amount": 53775, "billdate": "2018-09-03", "outlet": "KOLAR" }, { "amount": 269712, "billdate": "2018-09-04", "outlet": "JAYANAGAR" }, { "amount": 58850, "billdate": "2018-09-04", "outlet": "MALLESHWARAM" }, { "amount": 82999, "billdate": "2018-09-04", "outlet": "KOLAR" } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data, divId, filterdata) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById(divId); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill_____Date"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let outletWiseTotal = {}; th = document.createElement("th"); th.innerHTML = "Total1"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); } }); grandTotal += outletWiseTotal[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = outletWiseTotal[element]; th.classList.add("text-right"); headerRow.appendChild(th); }); th = document.createElement("th"); th.innerHTML = grandTotal; th.classList.add("text-right"); // grand total headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); el = d.amount; } }); td = document.createElement("td"); a = document.createElement("a"); td.classList.add("text-right"); td.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("actionButton"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("dropdown-toggle"); a.classList.add("dropdown-toggle-split"); a.setAttribute("data-place", outlet); /* this one to get which column is clicked*/ /* a.classList.add("text-center"); */ a.setAttribute("data-toggle", "dropdown"); a.innerHTML = el; td.appendChild(a); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, 'tbl', ''); $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); currentlyClickedOutlet = $(this).attr("data-place"); /* which column header is clicked (JAYANAGAR,MALLESHWARAM,KOLAR) */ console.log(currentlyClickedOutlet) }); }); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <button id="button" class="btn btn-default" type="submit">Search</button> <div id="tbl"></div> <div class="dropdown-menu" id="contextMenu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> 

我不知道我哪里出错了。

Answer 1

.contextMenu的click事件是在具有类contextMenu任何元素可用之前定义的。

向下移动以下代码应该可以解决问题

$dropdown = $("#contextMenu");
    $(".actionButton").click(function() {
      //move dropdown menu
      $(this).after($dropdown);
      //update links
      $(this).dropdown();
    });

最终的代码如下。

 $(document).ready(function() { $('#button').click(function() { var data = [{ "amount": 476426, "billdate": "2018-09-01", "outlet": "JAYANAGAR" }, { "amount": 92141, "billdate": "2018-09-01", "outlet": "MALLESHWARAM" }, { "amount": 115313, "billdate": "2018-09-01", "outlet": "KOLAR" }, { "amount": 511153, "billdate": "2018-09-02", "outlet": "JAYANAGAR" }, { "amount": 115704, "billdate": "2018-09-02", "outlet": "MALLESHWARAM" }, { "amount": 83597, "billdate": "2018-09-02", "outlet": "KOLAR" }, { "amount": 167421, "billdate": "2018-09-03", "outlet": "JAYANAGAR" }, { "amount": 53775, "billdate": "2018-09-03", "outlet": "KOLAR" }, { "amount": 269712, "billdate": "2018-09-04", "outlet": "JAYANAGAR" }, { "amount": 58850, "billdate": "2018-09-04", "outlet": "MALLESHWARAM" }, { "amount": 82999, "billdate": "2018-09-04", "outlet": "KOLAR" } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data, divId, filterdata) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById(divId); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill_____Date"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let outletWiseTotal = {}; th = document.createElement("th"); th.innerHTML = "Total1"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); } }); grandTotal += outletWiseTotal[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = outletWiseTotal[element]; th.classList.add("text-right"); headerRow.appendChild(th); }); th = document.createElement("th"); th.innerHTML = grandTotal; th.classList.add("text-right"); // grand total headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); el = d.amount; } }); td = document.createElement("td"); a = document.createElement("a"); td.classList.add("text-right"); td.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("actionButton"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("dropdown-toggle"); a.classList.add("dropdown-toggle-split"); /* a.classList.add("text-center"); */ a.setAttribute("data-toggle", "dropdown"); a.innerHTML = el; td.appendChild(a); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, 'tbl', ''); $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); }); }); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <button id="button" class="btn btn-default" type="submit">Search</button> <div id="tbl"></div> <div class="dropdown-menu" id="contextMenu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div>