Question

我有一个HTML表，它是在ajax的帮助下呈现的，但是在调用ajax表时，填充成功了，但是当我单击链接的下拉按钮时，它显示了错误。

这是我的JavaScript代码，用于填充表格并显示下拉列表

<div class="loader"></div>
 <div class="overlay"></div>
<div id="table1">
</div>
<div class="dropdown-menu" id="contextMenu">
  <a class="link1 dropdown-item" href="Billsummary.html">Item Wise Summary</a>

</div>

JavaScript

$(document).ready(function () {

    $('.loader').show();
    $('.overlay').show();

    $.ajax({
        url: "Categorysummaryol",
        method: "GET",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: {
            fromdate: $("#startdate").val(),
            todate: $("#enddate").val(),
            outlet: $("#all").val()

        },
        success: function (tableData) {
            //console.log("test",tableValue);

            addTable(tableData)
            $('.loader').hide();
            $('.overlay').hide();
            $("#export").show();
            $("#goBack").show();


            $dropdown = $("#contextMenu");
            $(".actionButton").click(function () {
                $dropdown = $("#contextMenu");
                for (var i = 0; i < $('#myexample tr').length; i += 1) {
                    var row = document.getElementById("myexample").rows[i];
                    $("#myRow" + i).click(function (e) {



                        $(this).after($dropdown);

                        $(this).dropdown();
                        var categoryCode = e.target.innerHTML;

                        console.log("categorycode", categoryCode);
                    });
                }

            });

        }

    });
});

function addTable(tableData) {
    var col = Object.keys(tableData[0]);

    var countNum = col.filter(i => !isNaN(i)).length;

    var num = col.splice(0, countNum);
    col = col.concat(num);

    var table = document.createElement("table");

    var tr = table.insertRow(-1);


    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = col[i];

        tr.appendChild(th);
    }


    for (var i = 0; i < tableData.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            var tabledata = tableData[i][col[j]];
            if (tabledata && !isNaN(tabledata)) {
                tabledata = parseInt(tabledata).toLocaleString('en-in')
            }
            if (tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]) {
                a = document.createElement("a");
                tabCell.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-toggle", "dropdown");
                a.setAttribute("id", "myRow" + i);
                a.innerHTML = tabledata;
                tabCell.appendChild(a);
            } else {
                span = document.createElement("span");
                span.innerHTML = tabledata;
                tabCell.appendChild(span)
            }


            if (j > 1) {

                tabCell.classList.add("text-right");
            }
        }
    }

    var divContainer = document.getElementById("table1");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
    table.setAttribute("id", "myexample");
}

在下拉菜单上点击时，在我的浏览器控制台TypeError: t is null; can't access its "setAttribute" property

上显示错误

我认为我没有正确编写代码，这就是为什么我会出错

在这里，我还提供了易于运行代码的JSON

[{"CATEGORY CODE":"C001","CATEGORY NAME":"Beverages","QUANTITY":"1.0000","AMOUNT":18},{"CATEGORY CODE":"C003","CATEGORY NAME":"Juices","QUANTITY":"1.0000","AMOUNT":75},{"CATEGORY CODE":"C004","CATEGORY NAME":"Soups","QUANTITY":"2.0000","AMOUNT":110},{"CATEGORY CODE":"C005","CATEGORY NAME":"Cookies","QUANTITY":"1.0000","AMOUNT":42},{"CATEGORY CODE":"C006","CATEGORY NAME":"Buns","QUANTITY":"5.0000","AMOUNT":90},{"CATEGORY CODE":"C007","CATEGORY NAME":"Breads","QUANTITY":"1.0000","AMOUNT":40},{"CATEGORY CODE":"C008","CATEGORY NAME":"Rusks","QUANTITY":"1.0000","AMOUNT":42},{"CATEGORY CODE":"C009","CATEGORY NAME":"Biscuits","QUANTITY":"1.0000","AMOUNT":46},{"CATEGORY CODE":"C010","CATEGORY NAME":"Puff","QUANTITY":"1.0000","AMOUNT":33},{"CATEGORY CODE":"C011","CATEGORY NAME":"Savouries","QUANTITY":"1.0000","AMOUNT":35},{"CATEGORY CODE":"C012","CATEGORY NAME":"Cake","QUANTITY":"3.0000","AMOUNT":2100},{"CATEGORY CODE":"C014","CATEGORY NAME":"IceCream","QUANTITY":"1.0000","AMOUNT":75},{"CATEGORY CODE":"C019","CATEGORY NAME":"Curry","QUANTITY":"1.0000","AMOUNT":185},{"CATEGORY CODE":"C021","CATEGORY NAME":"Starter","QUANTITY":"1.0000","AMOUNT":165},{"CATEGORY CODE":"C022","CATEGORY NAME":"Roti","QUANTITY":"1.0000","AMOUNT":45},{"CATEGORY CODE":"C023","CATEGORY NAME":"Chawal","QUANTITY":"1.0000","AMOUNT":185},{"CATEGORY CODE":"C024","CATEGORY NAME":"Dessert","QUANTITY":"4.0000","AMOUNT":266},{"CATEGORY CODE":"C025","CATEGORY NAME":"Mocktails","QUANTITY":"1.0000","AMOUNT":50},{"CATEGORY CODE":"C026","CATEGORY NAME":"Soup","QUANTITY":"1.0000","AMOUNT":100},{"CATEGORY CODE":"C027","CATEGORY NAME":"Salad","QUANTITY":"1.0000","AMOUNT":50},{"CATEGORY CODE":"C028","CATEGORY NAME":"Set Menu","QUANTITY":"1.0000","AMOUNT":430},{"CATEGORY CODE":"C029","CATEGORY NAME":"Pastry","QUANTITY":"1.0000","AMOUNT":59},{"CATEGORY CODE":"C030","CATEGORY NAME":"Packed Meals","QUANTITY":"2.0000","AMOUNT":50},{"CATEGORY CODE":"C031","CATEGORY NAME":"Packaging","QUANTITY":"1.0000","AMOUNT":12},{"CATEGORY CODE":"C034","CATEGORY NAME":"Bhath","QUANTITY":"1.0000","AMOUNT":68},{"CATEGORY CODE":"C036","CATEGORY NAME":"Snacks","QUANTITY":"1.0000","AMOUNT":50},{"CATEGORY CODE":"C037","CATEGORY NAME":"Breakfast","QUANTITY":"1.0000","AMOUNT":23},{"CATEGORY CODE":"C038","CATEGORY NAME":"Evening Snacks","QUANTITY":"1.0000","AMOUNT":73},{"CATEGORY CODE":"C040","CATEGORY NAME":"Sandwich","QUANTITY":"1.0000","AMOUNT":80},{"CATEGORY CODE":"C042","CATEGORY NAME":"Burger","QUANTITY":"2.0000","AMOUNT":160},{"CATEGORY CODE":"C043","CATEGORY NAME":"Meals","QUANTITY":"1.0000","AMOUNT":130},{"CATEGORY CODE":"C047","CATEGORY NAME":"Chats","QUANTITY":"1.0000","AMOUNT":30},{"CATEGORY CODE":"C048","CATEGORY NAME":"Combo","QUANTITY":"1.0000","AMOUNT":115},{"CATEGORY CODE":"C051","CATEGORY NAME":"Silver Thali","QUANTITY":"52.0000","AMOUNT":23400},{"CATEGORY CODE":"C052","CATEGORY NAME":"Sweets","QUANTITY":"1.0000","AMOUNT":38},{"CATEGORY CODE":"C054","CATEGORY NAME":"Instant Mixes","QUANTITY":"1.0000","AMOUNT":66},{"CATEGORY CODE":"C055","CATEGORY NAME":"RTE","QUANTITY":"1.0000","AMOUNT":59},{"CATEGORY CODE":"C057","CATEGORY NAME":"Spices","QUANTITY":"1.0000","AMOUNT":43},{"CATEGORY CODE":"C061","CATEGORY NAME":"Fast Food","QUANTITY":"1.0000","AMOUNT":28}]

Please check this Fiddle

HTML表中的下拉列表不显示链接

0 个答案: