Раскрывающиеся ссылки не отображаются в таблице HTML
У меня есть HTML-таблица, внутри которой я создаю раскрывающийся список в одном столбце, в котором будут две ссылки, чтобы перейти вперед или показать что-то, я успешно создал кнопку раскрывающегося списка, но ссылки раскрывающегося списка не отображаются.
пожалуйста, обратитесь к фрагменту
var currentlyClickedCode = "";
$(document).ready(function (){
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
currentlyClickedCode = $(this).attr("data-place");
console.info(currentlyClickedCode)
});
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]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
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-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("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
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)
});<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>
<div id = "table1">
</div>
<ul id = "contextMenu" class = "dropdown-menu" role = "menu">
<li><a href = "test1.jsp" class = "link1">BillSummary</a></li>
<li><a href = "test.jsp" class = "link2">Item Summary</a></li>
</ul>в моем приведенном выше фрагменте кода выполняется успешно и создается кнопка раскрывающегося списка, но не отображаются ссылки.
Я пытаюсь достичь
- Чтобы отображать раскрывающуюся ссылку при нажатии кнопки раскрывающегося списка.
- Распечатать на консоли, на которой нажата раскрывающаяся кнопка
Я применяю правильный подход, но не знаю, где что-то не так. так что, пожалуйста, направьте меня, любая помощь или руководство будут полезны.
мой код выдает ошибку на этом "TypeError: $(...).dropdown is not a function
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
100
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы не можете прикрепить прослушиватель событий .click() к динамически генерируемым элементам.
Вместо этого вы должны использовать .on():
$(document).on("click",".actionButton",function() {
... code here ...
}
var currentlyClickedCode = "";
$(document).ready(function() {
$dropdown = $("#contextMenu");
$(document).on("click",".actionButton",function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
currentlyClickedCode = $(this).attr("data-place");
console.info(currentlyClickedCode);
});
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]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
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-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("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
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)
});<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>
<div id = "table1">
</div>
<ul id = "contextMenu" class = "dropdown-menu" role = "menu">
<li><a href = "test1.jsp" class = "link1">BillSummary</a></li>
<li><a href = "test.jsp" class = "link2">Item Summary</a></li>
</ul>Другие вопросы по теме
Bootstrap datetimepicker не открывается
Экспорт всех данных в Excel, включая данные с разбивки на страницы
Количество развернутых элементов в строке для определенной ширины и высоты контейнера
Мобильное меню не закрывается
Как мне получить последний день выбранного месяца в jQuery datepicker?
Как соединить круги с линией по вертикали, если щелкнуть по кругу, он должен залиться цветом
Изменение z-индекса виджета
Регулярное выражение, если оператор else не работает
Google Map Как добавить второе местоположение в map-active.js
Как проверить, что данная дата равна текущему месяцу, используя javascript?
Похожие вопросы
Вызов json-файла API Google и отображение его как html, данные не получены, но сайт успешно вызван
Bootstrap datetimepicker не открывается
Как получить параметры URL-адреса из URL-адреса, разделенного косой чертой, например http://myweb.com/example/12345/222/4444 Я хочу получить 12345, 222, 4444 из указанного выше URL-адреса
Экспорт всех данных в Excel, включая данные с разбивки на страницы
Как использовать isNaN и charAt в машинописном тексте Angular 7?
Как передать переменную spring.bind из freemaker в функцию javascript
Генерировать строку объекта JS, но не JSON
Почему Vue.js использует однословный тег <component>, что нарушает их собственное руководство по стилю?
Как мне получить последний день выбранного месяца в jQuery datepicker?
Как соединить круги с линией по вертикали, если щелкнуть по кругу, он должен залиться цветом
@viveksingh да. Верно. Это единственное изменение, которое вам нужно сделать