javascript - 调用 ajax 或放置静态 JSON 时，下拉列表未显示在我的 HTML 表中

标签 javascript jquery html

我有一个带有下拉菜单的 HTML 表格。我正在做的是点击一个按钮。我正在显示具有下拉菜单的 HTML 表格，但我面临的问题是一个错误:

TypeError: t is null; can't access its "setAttribute" property

我正在使用 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>

我不知道我哪里错了。

最佳答案

.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>

关于javascript - 调用 ajax 或放置静态 JSON 时，下拉列表未显示在我的 HTML 表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53670094/

上一篇：javascript - 水平滚动时隐藏绝对定位的 <div> 的最佳方法？

下一篇：html - 如何在表格单元格中使用省略号？

相关文章：

javascript - jQuery 淡出函数

javascript - jQuery 选择具有空跨度的 div

javascript - RadioButton 不会设置选中的 javascript

javascript - HTML:自动滚动合并表

javascript - 使用 jQuery 创建一个元素并将其 append 到多个元素

html - 摆脱边距？

javascript - Bootstrap 3轮播滑动时隐藏图像

javascript - 使用 Javascript 播放和暂停图像

javascript - 为什么 redux 每次更改时都需要复制数据？

javascript - Vue react 性问题，需要一些解释

©2024 IT工具网  联系我们