javascript - 如何使用 javascript 将 HTML 表格单元格作为下拉按钮
问题描述
我想让我的 HTML 表格的两列像下拉按钮。我试过了，但所有的行都被转换成下拉按钮。我只希望特定列在我的表中下拉是categorycode和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>下拉按钮正在加载，但我不知道为什么下拉没有填充。我也提供ul了标签，但它没有显示，我不知道我在哪里犯了错误，请这里的任何人帮助我
解决方案
<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>