[英]Drop-downs are not showing in my HTML table while calling ajax or putting static JSON
I have an HTML table with dropdowns. 我有一个带下拉列表的HTML表。 What I am doing is on clicking on a button.
我正在做的是点击一个按钮。 I am showing HTML Table which are having dropdowns, but the issue I am facing is an error which is:
我正在显示有下拉列表的HTML表,但我遇到的问题是一个错误,它是:
TypeError: t is null;
TypeError:t为null; can't access its "setAttribute" property
无法访问其“setAttribute”属性
I am using Bootstrap4 drop-down. 我正在使用Bootstrap4下拉列表。
Here is my code: 这是我的代码:
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>
I don't know where I am going wrong. 我不知道我哪里出错了。
The click
event of .contextMenu
is defined before any element with the class contextMenu
is available. .contextMenu
的click
事件是在具有类contextMenu
任何元素可用之前定义的。
Moving the following code down should fix the issue 向下移动以下代码应该可以解决问题
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
});
The final code would be like the following. 最终的代码如下。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.