How do i get to Know which HTML table Column Drop-down is clicked

Question

I have a HTML table which is consist of drop down inside There are Three columns which have drop down which are JAYANAGAR , MALLESHWARAM and KOLAR What i want to achieve is that i want to know which columns drop-down is clicked and according to that i want to show another table in div tag on the same page i am finding very hard to achieve that

here is my code

<div id="tbl"></div>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="test1.html" class="link1">report1</a></li>
  <li><a href="" class="Link2">report2</a></li>
</ul>

$(window).load(function() {
    $dropdown = $("#contextMenu");
    $(".actionButton").click(function() {
      //get row ID

      //move dropdown menu
      $(this).after($dropdown);
      //update links

      $(this).dropdown();
    });
  });

data= [{"amount":78609,"billdate":"2018-08-14","outlet":"CHEF BAKERS BROOKFIELD"},{"amount":4460,"billdate":"2018-08-14","outlet":"CHEF BAKERS ARAKERE"},{"amount":14513,"billdate":"2018-08-14","outlet":"CHEF BAKERS AYYAPPA NGR"},{"amount":19269,"billdate":"2018-08-14","outlet":"Chef Bakers Bellandur"},{"amount":23936,"billdate":"2018-08-14","outlet":"CHEF BAKERS BAGMANE CBP"},{"amount":7925,"billdate":"2018-08-14","outlet":"Chef Bakers Doddanekkundi"},{"amount":10935,"billdate":"2018-08-14","outlet":"CHEF BAKERS SIDDAPURA"},{"amount":14288,"billdate":"2018-08-14","outlet":"CHEF BAKERS ECITY"},{"amount":14231,"billdate":"2018-08-14","outlet":"CHEF BAKERS VYDEHI"},{"amount":9090,"billdate":"2018-08-14","outlet":"Chef Bakers Hennur Main Road"},{"amount":26899,"billdate":"2018-08-14","outlet":"CHEF BAKERS KADUBEESANAHALLI"},{"amount":20630,"billdate":"2018-08-14","outlet":"CHEF BAKERS COFFEE BOARD"},{"amount":3250,"billdate":"2018-08-14","outlet":"Chef Bakers Kaggadasapura"},{"amount":3480,"billdate":"2018-08-14","outlet":"Chef Bakers Koramangala"},{"amount":8057,"billdate":"2018-08-14","outlet":"CHEF BAKERS KASAVANAHALLI"},{"amount":13635,"billdate":"2018-08-14","outlet":"Chef Bakers Marathahalli 1"},{"amount":10000,"billdate":"2018-08-14","outlet":"Chef bakers Marathahalli 2"},{"amount":18014,"billdate":"2018-08-14","outlet":"Chef Bakers Mahadevapura"},{"amount":11165,"billdate":"2018-08-14","outlet":"CHEF BAKERS BEL LAYOUT"},{"amount":13788,"billdate":"2018-08-14","outlet":"CHEF BAKERS MG ROAD"},{"amount":44735,"billdate":"2018-08-14","outlet":"CHEF BAKERS MANYATA TECH PARK"},{"amount":9921,"billdate":"2018-08-14","outlet":"CHEF BAKERS NAGAWARA"},{"amount":16065,"billdate":"2018-08-14","outlet":"CHEF BAKERS PRESTIGE SHANTHINIKETAN"},{"amount":25445,"billdate":"2018-08-14","outlet":"CHEF BAKERS PRITECH"},{"amount":10533,"billdate":"2018-08-14","outlet":"CHEF BAKERS RR NAGAR"},{"amount":22390,"billdate":"2018-08-14","outlet":"Chef Bakers Kadugodi"},{"amount":11715,"billdate":"2018-08-14","outlet":"CHEF BAKERS SARJAPURA ROAD"},{"amount":5075,"billdate":"2018-08-14","outlet":"CHEF BAKERS SINGASANDRA"},{"amount":8730,"billdate":"2018-08-14","outlet":"CHEF BAKERS SPICE GARDEN"},{"amount":26165,"billdate":"2018-08-14","outlet":"Chef Bakers Whitefield"},{"amount":26175,"billdate":"2018-08-14","outlet":"CHEF BAKERS YELAHANKA"}]

     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) {
                    billdates = data.billdates;
                    outlets = data.outlets;
                    data = data.data;
                    let tbl = document.getElementById("tbl");
                    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 = "Total";
                    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");   //ol totals
                        headerRow.appendChild(th);
                    });
                  /*  th = document.createElement("th");
                  a = document.createElement("a");
                  // th.innerHTML = "Action drop"; // removed
                  th.classList.add("text-center");
                  th.classList.add("dropdown");
                  a.classList.add("btn-default");
                  a.classList.add("actionButton");


                  // added
                  a.setAttribute("data-toggle", "dropdown");
                  a.innerHTML = "Action drop";
                  th.appendChild(a); // added

                  headerRow.appendChild(th); */
                    th = document.createElement("th");
                    th.innerHTML = grandTotal;
                      th.classList.add("text-right");  // grand total
              /*  console.log(grandTotal);*/
                   // headerRow.appendChild(th);
                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");
                            td.innerHTML = el; */



                           td = document.createElement("td");
                          a = document.createElement("a");
                          // th.innerHTML = "Action drop"; // removed
                          td.classList.add("text-right");
                          td.classList.add("dropdown");
                          a.classList.add("btn-default");
                          a.classList.add("actionButton");


                          // added
                          a.setAttribute("data-toggle", "dropdown");
                          a.innerHTML = el;
                          td.appendChild(a); // added

                          row.appendChild(td);



                             /* td.classList.add("text-right"); //oldata
                            row.appendChild(td); */
                        });
                        /*console.log("row is : " , row.children )*/
                        td = document.createElement("td");
                        td.innerHTML = total;
                         td.classList.add("text-right"); //column total
                       // row.appendChild(td);
                        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);

If JAYANAGAR dropdown is clicked then how would i know it's jayanagar dropdown and have to show the data which is for jayanagar in next table

and also all my Outlets like jayanagar malleshwaram are dynamic it can vary on the basis of user input

Here is the fiddle link of my HTML table with drop down please anyone out there help me out

Answer 1

You can get td clicked when you click combo inside td like this

 var clickedtd = -1; 

 $(window).load(function() {

    $dropdown = $("#contextMenu");
    $(".actionButton").click(function() {
    clickedtd = $(this).parent().index(); // get clicked td index
     console.log($(this).parent().index());

      //move dropdown menu
      $(this).after($dropdown);
      //update links

      $(this).dropdown();
    });



    $(".link1").click(function(){
    console.log("Report 1 : ");
   if(clickedtd == 2){
    // report 1 JAYANAGAR clicked
  console.log("JAYANAGAR");
   } else if(clickedtd == 3){
    // report 1 MALLESHWARAM clicked
  console.log("MALLESHWARAM");
   }else if(clickedtd == 4){
    // report 1 KOLAR clicked
  console.log("KOLAR");
   }

});


// Report 2 click event
$(".Link2").click(function(){
console.log("2: "+clickedtd);
   if(clickedtd == 2){
    // report 2 JAYANAGAR clicked
   } else if(clickedtd == 3){
    // report 2 MALLESHWARAM clicked
   }else if(clickedtd == 4){
    // report 2 KOLAR clicked
   }

});


  });

Now when you have clickedtd you know which td you clicked now in report click you can check that clickedtd to show the appropriate report.

Working Fiddle

See the console for log

Edit 1:

This should be enough to get you started and complete the flow.

To get header dynamically by index

var headerName = $('.table-hover').find('th').eq(clickedtd).text(); 
console.log("headerName: "+headerName);

Check console of Report 1 click

Updated Fiddle

Answer 2

可能是您可以绑定click tr ，并使用e.target ， this分别获得a和tr ，如下所示：

document.querySelector("tr").addEventListener("click",function(e){console.log(e.target,this)})