如何使用JavaScript将HTML表格单元格设置为下拉按钮

Question

I want to make Two columns of my HTML table to be like drop down button. i have tried but all the rows been converted into drop-down button. I only want specific columns to be drop-down in my table the are categorycode and categoryname

 $(document).ready(function() { $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); }); var tableData = [{ "CATEGORY CODE": "C001", "CATEGORY NAME": "Beverages", "QUANTITY": "1.0000", "AMOUNT": 18 }, { "CATEGORY CODE": "C002", "CATEGORY NAME": "Shakes", "QUANTITY": "1.0000", "AMOUNT": 80 }, { "CATEGORY CODE": "C003", "CATEGORY NAME": "Juices", "QUANTITY": "1.0000", "AMOUNT": 70 }, { "CATEGORY CODE": "C004", "CATEGORY NAME": "Soups", "QUANTITY": "1.0000", "AMOUNT": 55 }, { "CATEGORY CODE": "C005", "CATEGORY NAME": "Cookies", "QUANTITY": "1.0000", "AMOUNT": 46 }, { "CATEGORY CODE": "C006", "CATEGORY NAME": "Buns", "QUANTITY": "1.0000", "AMOUNT": 21 }, { "CATEGORY CODE": "C007", "CATEGORY NAME": "Breads", "QUANTITY": "1.0000", "AMOUNT": 40 }, { "CATEGORY CODE": "C008", "CATEGORY NAME": "Rusks", "QUANTITY": "1.0000", "AMOUNT": 52 }, { "CATEGORY CODE": "C009", "CATEGORY NAME": "Biscuits", "QUANTITY": "1.0000", "AMOUNT": 38 }, { "CATEGORY CODE": "C010", "CATEGORY NAME": "Puff", "QUANTITY": "4.0000", "AMOUNT": 132 }, { "CATEGORY CODE": "C011", "CATEGORY NAME": "Savouries", "QUANTITY": "0.1000", "AMOUNT": 29 }, { "CATEGORY CODE": "C012", "CATEGORY NAME": "Cake", "QUANTITY": "1.0000", "AMOUNT": 46 }, { "CATEGORY CODE": "C014", "CATEGORY NAME": "IceCream", "QUANTITY": "1.0000", "AMOUNT": 70 }, { "CATEGORY CODE": "C019", "CATEGORY NAME": "Curry", "QUANTITY": "1.0000", "AMOUNT": 180 }, { "CATEGORY CODE": "C021", "CATEGORY NAME": "Starter", "QUANTITY": "1.0000", "AMOUNT": 165 }, { "CATEGORY CODE": "C022", "CATEGORY NAME": "Roti", "QUANTITY": "1.0000", "AMOUNT": 60 }, { "CATEGORY CODE": "C023", "CATEGORY NAME": "Chawal", "QUANTITY": "1.0000", "AMOUNT": 185 }, { "CATEGORY CODE": "C024", "CATEGORY NAME": "Dessert", "QUANTITY": "1.0000", "AMOUNT": 66 }, { "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": "3.0000", "AMOUNT": 1290 }, { "CATEGORY CODE": "C029", "CATEGORY NAME": "Pastry", "QUANTITY": "1.0000", "AMOUNT": 80 }, { "CATEGORY CODE": "C030", "CATEGORY NAME": "Packed Meals", "QUANTITY": "1.0000", "AMOUNT": 25 }, { "CATEGORY CODE": "C031", "CATEGORY NAME": "Packaging", "QUANTITY": "1.0000", "AMOUNT": 5 }, { "CATEGORY CODE": "C034", "CATEGORY NAME": "Bhath", "QUANTITY": "1.0000", "AMOUNT": 68 }, { "CATEGORY CODE": "C036", "CATEGORY NAME": "Snacks", "QUANTITY": "1.0000", "AMOUNT": 10 }, { "CATEGORY CODE": "C037", "CATEGORY NAME": "Breakfast", "QUANTITY": "5.0000", "AMOUNT": 119 }, { "CATEGORY CODE": "C038", "CATEGORY NAME": "Evening Snacks", "QUANTITY": "1.0000", "AMOUNT": 70 }, { "CATEGORY CODE": "C040", "CATEGORY NAME": "Sandwich", "QUANTITY": "1.0000", "AMOUNT": 75 }, { "CATEGORY CODE": "C042", "CATEGORY NAME": "Burger", "QUANTITY": "1.0000", "AMOUNT": 75 }, { "CATEGORY CODE": "C043", "CATEGORY NAME": "Meals", "QUANTITY": "1.0000", "AMOUNT": 220 }, { "CATEGORY CODE": "C044", "CATEGORY NAME": "Curd", "QUANTITY": "1.0000", "AMOUNT": 12 }, { "CATEGORY CODE": "C048", "CATEGORY NAME": "Combo", "QUANTITY": "2.0000", "AMOUNT": 180 }, { "CATEGORY CODE": "C051", "CATEGORY NAME": "Silver Thali", "QUANTITY": "1.0000", "AMOUNT": 450 }, { "CATEGORY CODE": "C052", "CATEGORY NAME": "Sweets", "QUANTITY": "1.0000", "AMOUNT": 115 }, { "CATEGORY CODE": "C054", "CATEGORY NAME": "Instant Mixes", "QUANTITY": "1.0000", "AMOUNT": 66 }, { "CATEGORY CODE": "C055", "CATEGORY NAME": "RTE", "QUANTITY": "1.0000", "AMOUNT": 228 }, { "CATEGORY CODE": "C057", "CATEGORY NAME": "Spices", "QUANTITY": "1.0000", "AMOUNT": 40 }, { "CATEGORY CODE": "C061", "CATEGORY NAME": "Fast Food", "QUANTITY": "1.0000", "AMOUNT": 15 } ] function addTable(tableData) { var col = Object.keys(tableData[0]); // get all the keys from first var countNum = col.filter(i => !isNaN(i)).length; // count all which // are number var num = col.splice(0, countNum); // cut five elements from frist col = col.concat(num); // shift the first item to last // CREATE DYNAMIC TABLE. var table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. 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.classList.add("text-center"); */ /* a.setAttribute("data-place", outlet); a.setAttribute("data-plac", element); */ a.setAttribute("data-toggle", "dropdown"); 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"); } } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("table1"); divContainer.innerHTML = ""; divContainer.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); } addTable(tableData) }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.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> <div id="table1"> </div> <ul id="contextMenu" class="dropdown-menu" role="menu"> <li><a href="#" class="link1">BillSummary</a></li> <li><a href="#" class="link2">Item Summary</a></li> </ul> 

Drop-down button is secussfully loading but i don't know why drop-down is not populating. i have provide ul tag also but it not showing, i don't know where ia making mistake please any one out here help me

Answer 1

You can try this: ( I didn't test, just came to my mind )

if(tableData[i]['CATEGORY NAME'] === tableData[i][col[j]] || tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]){
    a = document.createElement("a");
    tabCell.classList.add("dropdown");
    a.classList.add("btn");
    a.classList.add("btn-default");
    a.classList.add("actionButton");
    /*  a.classList.add("text-center"); */
    /*  a.setAttribute("data-place", outlet);
    a.setAttribute("data-plac", element); */
    a.setAttribute("data-toggle", "dropdown");
    a.innerHTML = tabledata;
    tabCell.appendChild(a);
} else {
    span = document.createElement("span");
    span.innerHTML = tabledata;
    tabCell.appendChild(span)
}

Answer 2

 <script> $(document).ready(function () { var tableData = [{ "CATEGORY CODE": "C001", "CATEGORY NAME": "Beverages", "QUANTITY": "1.0000", "AMOUNT": 18 }, { "CATEGORY CODE": "C002", "CATEGORY NAME": "Shakes", "QUANTITY": "1.0000", "AMOUNT": 80 }, { "CATEGORY CODE": "C003", "CATEGORY NAME": "Juices", "QUANTITY": "1.0000", "AMOUNT": 70 }, { "CATEGORY CODE": "C004", "CATEGORY NAME": "Soups", "QUANTITY": "1.0000", "AMOUNT": 55 }, { "CATEGORY CODE": "C005", "CATEGORY NAME": "Cookies", "QUANTITY": "1.0000", "AMOUNT": 46 }, { "CATEGORY CODE": "C006", "CATEGORY NAME": "Buns", "QUANTITY": "1.0000", "AMOUNT": 21 }, { "CATEGORY CODE": "C007", "CATEGORY NAME": "Breads", "QUANTITY": "1.0000", "AMOUNT": 40 }, { "CATEGORY CODE": "C008", "CATEGORY NAME": "Rusks", "QUANTITY": "1.0000", "AMOUNT": 52 }, { "CATEGORY CODE": "C009", "CATEGORY NAME": "Biscuits", "QUANTITY": "1.0000", "AMOUNT": 38 }, { "CATEGORY CODE": "C010", "CATEGORY NAME": "Puff", "QUANTITY": "4.0000", "AMOUNT": 132 } ] function addTable(tableData) { var col = Object.keys(tableData[0]); // get all the keys from first var countNum = col.filter(i => !isNaN(i)).length; // count all which // are number var num = col.splice(0, countNum); // cut five elements from frist col = col.concat(num); // shift the first item to last // CREATE DYNAMIC TABLE. var table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. 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 NAME'] === tableData[i][col[j]] || tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]) { a = document.createElement("a"); tabCell.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-default"); a.classList.add("actionButton"); /* a.classList.add("text-center"); */ /* a.setAttribute("data-place", outlet); a.setAttribute("data-plac", element); */ a.setAttribute("data-toggle", "dropdown"); a.setAttribute("id", 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"); } } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 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"); } addTable(tableData) //$dropdown = $("#contextMenu"); for (var i = 0; i < $('#myexample tr').length; i += 1) { var row = document.getElementById("myexample").rows[i]; $("#" + i).click(function (e) { //console.log($(this)); //console.log(e.target.innerHTML); // Ajax Call while clicking on table $.ajax({ type: "POST", url: 'getdata.php', data: {id: $(this).attr('id')}, dataType: "json", success: function (data) { console.log((data)); $("#" + data.id).after($(data.html)); $("#" + data.id).dropdown(); }, error: function (er) { console.log(er); } }); // end code }); } }); </script> /*Please create PHP file(getdata.php) and put below code*/ /*You can use own logic to fetch dynamic data*/ /* <?php if(!empty($_POST['id'])){ $id = $_POST['id']; if ($id == '1') { $html = '<ul id="1" class="dropdown-menu" role="menu"> <li><a href="#" class="link1">BillSummary</a></li> <li><a href="# class="link2">Soups</a></li> <li><a href="# class="link3">Star</a></li> </ul>'; } else if ($id == '2'){ $html = '<ul id="1" class="dropdown-menu" role="menu"> <li><a href="#" class="link1">My C003</a></li> <li><a href="# class="link2">My Cookies</a></li> <li><a href="# class="link3">MyFavourite</a></li> </ul>'; } echo json_encode(array('id'=>$id, 'html'=>$html)); } ?> */ 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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" /> <div id="table1"> </div> <ul id="contextMenu" class="dropdown-menu" role="menu"> <li><a href="#" class="link1">BillSummary</a></li> <li><a href="# class="link2">Item Summary</a></li> </ul>