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

you need to add some javascript for that , each need to have seprate value.So that you can check later. — ZZA, Dec 03 '18 at 09:30
you need to give that dropdown Id and u can easily take the value of that dropdown which value is selected — ZZA, Dec 03 '18 at 09:33
@viveksingh, you should have something to identify. And on the basis of that identification, you can add an if/else condition and achieve your results. Also look for click target property ( it might make it more simple :) ) — Aslam, Dec 03 '18 at 09:33
https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript check here — ZZA, Dec 03 '18 at 09:34
@Aslam any link with respect to my code updation wil be helpfull...i have to call a another table also onthe click of dropdown — , Dec 03 '18 at 09:35
@ZZA i only want to know the header so that i can use that value in my query to create a new HTML table — , Dec 03 '18 at 09:37
that can also be accomplish easily u need to use jquery hide and show. — ZZA, Dec 03 '18 at 09:37
@ZZA yup i know about hide and show..can you help me with some code where i am clicking `JAYANAGAR` a diff content is called if i am selecting `MALLESHWARAM` dropdown then different content is called ? — , Dec 03 '18 at 09:40
sorry what u want to do is to take value of selected one or what? a little confuse — ZZA, Dec 03 '18 at 09:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184613/discussion-between-vivek-singh-and-zza). — , Dec 03 '18 at 09:41

MyTwoCents · Answer 1 · 2018-12-03T10:11:20.567

0

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

edited Dec 03 '18 at 10:11

answered Dec 03 '18 at 09:59

MyTwoCents

7,284
3
24
52

hey you are right but i have to do this dynamically here i have only there outlets i.e jayanagar,malleshwaram,kolar..but user can selects 10-15 then how would i know howmuch condition i have to run – Dec 03 '18 at 10:04
wait let me check please don't go any where – Dec 03 '18 at 10:15
hey check my code i have updated the json here but its not giving me the header name no check this link [http://jsfiddle.net/xkt9501m/26/] – Dec 03 '18 at 10:22
Pls, check my Updated Fiddle added in the answer. It's working you can get help from there – MyTwoCents Dec 03 '18 at 10:26
there you are using if else condition with jayanagar malleshwaram index but i don't have fixed index these may increased – Dec 03 '18 at 10:28
Dude focus on this line var headerName = $('.table-hover').find('th').eq(clickedtd).text(); Forget about if else .. this will give you any th name based on index its not hardcoded. – MyTwoCents Dec 03 '18 at 10:36
but why are you using `.eq(clicked).text` this one is only giving for 3 of jayanagar,malleshwaram.kolar – Dec 03 '18 at 10:37
My dear Vivek, lets say you have 100 th . So on click of any td you need its th. To do that you need the clickedIndex. This is called getting dynamic header name, Still if you have doubt. God bless you. – MyTwoCents Dec 03 '18 at 10:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184620/discussion-between-vivek-singh-and-mytwocents). – Dec 03 '18 at 10:44

score 0 · Answer 2 · answered Dec 03 '18 at 10:26

0

May be you can bind click on tr, and use the e.target and this respectively get the a and tr, like this:

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

answered Dec 03 '18 at 10:26

真能逗我笑

27
3

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

2 Answers2