CODEWITHSUNDEEP
javascriptjqueryhtmlcss
manish thakur
manish thakur

Reputation: 820

How to put a dropdown button into a HTML table using JavaScript?

I have some JSON data from which I am populating a HTML table using JavaScript. What I am trying to achieve is to put a new column named as Action and having button named as action drop in that column. this button will be a dropdown button.

So basically I want to create a HTML table with a drop down button.

I have successfully created it with Static data

$(window).load(function(){
//save the selector so you don't have to do the lookup everytime
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
    //get row ID
    var id = $(this).closest("tr").children().first().html();
    //move dropdown menu
    $(this).after($dropdown);
    //update links
   
    //show dropdown
   
});
});
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">

</head>
<body>
  <table id="myTable" class="table table-hover table-bordered table-striped">
    <thead>
      <tr>
 
        <th>Billdate</th>
        <th>Total1</th>
        <th>Jayanagar</th>
        <th>Malleshwaram</th>
        <th>Kolar</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        
        <td>Total</td>
        <td>450273</td>
        <td>2855952</td>
        <td>516093</td>
        <td>678228</td>
        
        <td class="dropdown"><a class="btn btn-default actionButton"
          data-toggle="dropdown" href="#"> Action drop </a></td>
      </tr>
     
    </tbody>
  </table>
  <ul id="contextMenu" class="dropdown-menu" role="menu">
    <li><a  href="test.html" class="link1">go to next</a></li>
    <li><a href="test1.html" class="Link2">next</a></li>
  </ul>
 
</body>
</html>

but I want to do this into my dynamic HTML table where I'm not able to add the drop down class to <a> tag

What I have done so far is

data= [
       {
         "amount": 291589,
         "billdate": "2018-08-01",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 58337,
         "billdate": "2018-08-01",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 65970,
         "billdate": "2018-08-01",
         "outlet": "KOLAR"
       },
       {
         "amount": 296125,
         "billdate": "2018-08-02",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 56545,
         "billdate": "2018-08-02",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 72213,
         "billdate": "2018-08-02",
         "outlet": "KOLAR"
       },
       {
         "amount": 346605,
         "billdate": "2018-08-03",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 62459,
         "billdate": "2018-08-03",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 65248,
         "billdate": "2018-08-03",
         "outlet": "KOLAR"
       },
       {
         "amount": 518212,
         "billdate": "2018-08-04",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 104801,
         "billdate": "2018-08-04",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 138151,
         "billdate": "2018-08-04",
         "outlet": "KOLAR"
       },
       {
         "amount": 628358,
         "billdate": "2018-08-05",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 115223,
         "billdate": "2018-08-05",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 134107,
         "billdate": "2018-08-05",
         "outlet": "KOLAR"
       },
       {
         "amount": 177866,
         "billdate": "2018-08-06",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 66095,
         "billdate": "2018-08-06",
         "outlet": "KOLAR"
       },
       {
         "amount": 284069,
         "billdate": "2018-08-07",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 58789,
         "billdate": "2018-08-07",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 67886,
         "billdate": "2018-08-07",
         "outlet": "KOLAR"
       },
       {
         "amount": 313128,
         "billdate": "2018-08-08",
         "outlet": "JAYANAGAR"
       },
       {
         "amount": 59939,
         "billdate": "2018-08-08",
         "outlet": "MALLESHWARAM"
       },
       {
         "amount": 68558,
         "billdate": "2018-08-08",
         "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) {
     	            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");
                    let a = document.createElement("a");
     	            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];
     	            });
     	            th = document.createElement("th");
     	                th.innerHTML = "Action";                     
                        th.classList.add("text-center");
     	                headerRow.appendChild(th);
     	            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";
                         th.classList.add("text-right");   
                         th.classList.add("dropdown");
                       a.classList.add("btn-default");
                       a.classList.add("actionButton");
     	                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);
            
     	            
     	      

     	            tbl.innerHTML = "";
     	            tbl.appendChild(table);
     	            table.classList.add("table");
     	            table.classList.add("table-striped");
     	            table.classList.add("table-bordered");
     	        }
                
                                

                
                 let formatedData = formatData(data);
                 renderTable(formatedData);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="tbl"></div>

</body>
</html>

I am trying to make Action drop a drop down button but don't know where I am lagging?

Upvotes: 0

Views: 3809

Answers (3)

Srishti Gupta
Srishti Gupta

Reputation: 1273

You are not appending the anchor tag as the child element to the table head. Also, instead of <th>, you can use <td> here, as you used in your static content.

th = document.createElement("th"); 
a = document.createElement("a") //
th.innerHTML = "Action drop"; // removed this line
th.classList.add("text-right");
th.classList.add("dropdown"); 
a.classList.add("btn-default");
a.classList.add("actionButton");
a.setAttribute('data-toggle', 'dropdown'); // add this line
a.innerHTML = "Action drop"; // add this line
th.appendChild(a); // add this line
headerRow.appendChild(th);

Also, include the <ul> element below the <div> tag with id="tbl" like you have done in your static page:

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

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">go to next</a></li>
  <li><a href="#" class="Link2">next</a></li>
</ul>

And at last, inside your JavaScript code, add the code for handling onClick event of the Action button (you have already written this in JQuery in your static page).

Upvotes: 3

Persijn
Persijn

Reputation: 15000

Adding select to a html table

  • Created a select element with option elements.

The method createSelect(options) does this.

  • Populate the select with options from your data.

The method createSelect(options) takes an option param that creates a option element for every item in options. Used jquery$.eachto iterate over the array. This select is returned by the method andappend`ed to the end of the table row (tr).

  • Add the resulted select to your table

I added some ids in my html #thead, #tbody, that i can use in jquery to add elements onto. They are called hooks.
Selected our table row (tr element) inside the tbody to add the resulting select to.

data = [{
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
];

//Creates an empty select and iterates over all options
function createSelect(options) {
  var select = $("<select></select>");
  $.each(options, function(opt) {
    var option = $("<option></option>");
    var item = options[opt]
    option.text(item.amount + " " + item.outlet);
    select.append(option);
  });
  return select;
}

//Start function
$(function() {
  var thead = $("#thead");
  var tbody = $("#tbody");
  var tr = tbody.children(1);
  console.log(tr);
  var td = $("<td></td>");
  var select = createSelect(data)
  td.append(select);
  tr.append(td);
});
td {
  border: 1px solid black;
  padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="tbl">
    <table>
      <thead>
        <tr id="thead">
          <th>Label 1</th>
          <th>Drop down label</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <tr>
          <td>Lorem</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

Upvotes: 0

Nitesh Saxena
Nitesh Saxena

Reputation: 199

There looks like a problem in your code

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

Anchor tag <a> should be inside <th> element but the code is setting 'Action Drop' as the HTML inside. You could change your code like this.

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

th.appendChild(a);
headerRow.appendChild(th);

Note the change, now 'Action drop' is set for <a> and <th> is appending <a> as child. Hope this solves the issue.

Upvotes: 2

Related Questions