Получить идентификатор нажатой строки
Я использую "jquery": "^3.4.0" и DataTables 1.10.18.
У меня есть следующая таблица:
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(() => {
var c = this.id
console.info(c)
});<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Global stylesheets -->
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src = "https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class = "navbar-top">
<!-- Page content -->
<div class = "page-content pt-0">
<!-- Default ordering -->
<div class = "card">
<div class = "card-body">
<table class = "table datatable-responsive dataTable" style = "width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class = "text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class = "badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/baby.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Joe</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src = "./assets/img/diy.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Brad</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/infographic.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Tom</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>Я пытаюсь поместить прослушиватель кликов на нажатую кнопку редактирования.
Однако в настоящее время я получаю только undefined обратно. Вместо этого я хотел бы вернуть идентификатор в первом столбце.
Любые предложения, что я делаю неправильно?
Поведение ключевого слова "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) для оценки ваших знаний,...
1
0
462
5
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 5
Вы используете стрелочные функции, которые изменят область действия this на window, поэтому для ссылки на область действия элемента проще всего избегать стрелочных функций для этих обработчиков и просто использовать традиционные функции:
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function() {
var c = this.id
console.info(c)
});<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Global stylesheets -->
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src = "https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class = "navbar-top">
<!-- Page content -->
<div class = "page-content pt-0">
<!-- Default ordering -->
<div class = "card">
<div class = "card-body">
<table class = "table datatable-responsive dataTable" style = "width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class = "text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class = "badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/baby.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Joe</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src = "./assets/img/diy.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Brad</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/infographic.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Tom</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>Однако, если вам все еще нужны стрелочные функции, передайте event параметр стрелочной функции и получите ссылку на элемент, используя event.target.
- Чтобы получить
id, который у вас есть в первом столбце, вы можете найти ближайшую строку таблицы, а затем выбрать первый столбец таблицы, чтобы получить это текстовое значение. - Вам нужно использовать селектор класса для всех этих строк вместо селектора идентификатора
#edit-row, посколькуidдолжен быть уникальным на странице HTML.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$(".edit-row").click((e) => {
var c = e.target.id
var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
console.info(hashId)
});<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Global stylesheets -->
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src = "https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class = "navbar-top">
<!-- Page content -->
<div class = "page-content pt-0">
<!-- Default ordering -->
<div class = "card">
<div class = "card-body">
<table class = "table datatable-responsive dataTable" style = "width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class = "text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class = "badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/baby.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Joe</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" class = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src = "./assets/img/diy.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Brad</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" class = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/infographic.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Tom</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" class = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>this в обработчике кликов указывал на глобальный объект Window, потому что вы использовали функцию стрелки, измените ее на обычный обратный вызов, и она будет работать, как и ожидалось.
Проверьте этот ответ для получения дополнительной информации.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function(event) {
var c = this.id;
console.info(c)
});<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Global stylesheets -->
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src = "https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class = "navbar-top">
<!-- Page content -->
<div class = "page-content pt-0">
<!-- Default ordering -->
<div class = "card">
<div class = "card-body">
<table class = "table datatable-responsive dataTable" style = "width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class = "text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class = "badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/baby.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Joe</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src = "./assets/img/diy.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Brad</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/infographic.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Tom</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html> Ответ принят как подходящий
Я просто использую ваш код в качестве примера и делаю некоторые изменения в jQuery.
Пожалуйста, попробуйте это, надеюсь, это сработает для вас.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
$(document).on("click", "#edit-row", function(){
console.info('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
});
});<!DOCTYPE html>
<html lang = "en">
<head>
<!-- Global stylesheets -->
<link href = "https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel = "stylesheet" type = "text/css">
<link href = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src = "https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src = "https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class = "navbar-top">
<!-- Page content -->
<div class = "page-content pt-0">
<!-- Default ordering -->
<div class = "card">
<div class = "card-body">
<table class = "table datatable-responsive dataTable" style = "width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class = "text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class = "badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/baby.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Joe</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src = "./assets/img/diy.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Brad</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class = "badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src = "./assets/img/infographic.jpg" alt = "" srcset = "" style='width:20%;'></td>
<td>Tom</td>
<td class = "text-center">
<div class = "list-icons">
<div class = "dropdown">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" id = "edit-row" class = "dropdown-item"><i class = "icon-pencil"></i> Edit</a>
<a href = "#" class = "dropdown-item"><i class = "icon-bin"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>DataTables имеет собственное решение, вы можете использовать выберите расширение для получения выбранных данных строки, для вас очень полезен пример
Учитывая вашу конечную цель (редактируемая DataTable), я позволю себе предложить несколько улучшений вашего приложения, так что вам не действительно нужно получить идентификатор строки, по которой щелкнули, и выполнить всю тяжелую работу HTML самостоятельно.
- Вместо использования внешнего AJAX-вызова для заполнения ваших таблиц данных я бы рекомендовал использовать встроенную опцию
ajax.
$("#posts").DataTable({
//specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
//where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
//if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
...
ajax: {
url: "/getdata"
dataSrc: ''
}
})
- используйте параметр
columns.render, чтобы изменить содержимое ячейки, чтобы оно отображалось в виде значка или раскрывающегося меню.
dataTable = $("#posts").DataTable({
...
columns: [
{ data: "id", title: "Id" },
{
data: "status",
title: "Status",
//render status as a badge, having class, based on status value
render: data => `<span class = "badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
}
...
]
})
- и точка существенный - оставить отметку номера строки в раскрывающемся элементе при рендеринге, чтобы вы могли получить доступ к этому значению позже, когда вам нужно отредактировать/удалить строку таблицы
$("#posts").DataTable({
...
columns: [
...
{
data: null,
title: "Actions",
//render 'Actions' column as a drop-down menu wrapper,
//appending 'row' attribute with corresponding row number
//as a value
render: (data, type, row, meta) => `
<div class = "dropdown" row = "${meta.row}">
<a href = "#" class = "list-icons-item" data-toggle = "dropdown">
<i class = "icon-menu9"></i>
</a>
<div class = "dropdown-menu dropdown-menu-right">
<a href = "#" class = "dropdown-item edit-row"><i class = "icon-pencil"></i>Edit</a>
<a href = "#" class = "dropdown-item delete-row"><i class = "icon-bin"></i>Delete</a>
</div>
</div>
`
}
]
});
- используйте приведенные выше номера строк, чтобы изменить строку целевой таблицы, используя методы API DataTables (например,
row().remove()для удаления), я буду использовать самый простой пример (удаление строки во внешнем интерфейсе), поскольку вы не поделились подробностями, поскольку для того, хотите ли вы изменить как внутренние, так и внешние данные или только последние
//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
//grab dropdown wrapper and obtain row number
const rowNumber = $(this)
.closest(".dropdown")
.attr("row");
//delete corresponding table row and re-draw the table
dataTable.row(rowNumber).remove();
dataTable.draw();
});
Полный рабочий ДЕМО вашего примера проекта можно найти здесь или вы можете изучить эту демонстрацию в инструментах разработчика вашего браузера, используя этот связь.
P.S., если по какой-то причине вы все же решите продолжить свой подход, вы можете запросить сообщение это (которое очень похоже на ваше) о способе получения свойств модели данных (в частности, «id») выбранной строки
Другие вопросы по теме
Карточка flp не работает в сафари и нормально работает в Mozilla, Explorer и Chrome
Как избавиться от ошибки сборки SourceMapConcat в emberjs?
Как выбрать текущую дату по умолчанию в дате типа ввода
Заставить ленту меню скользить вниз и вверх вместе с меню при переключении
Установка minDate для предотвращения выбора даты окончания до даты начала
JQuery получает диапазон ячеек таблицы между двумя ячейками
Событие Click на <div> не срабатывает в Firefox, но срабатывает в Chrome
JQuery, как сериализовать объект не DOM для публикации для AJAX?
Проверьте, упоминается ли указанное время в увеличенном времени
Как отменить ожидающий вызов API, когда диалоговое окно закрыто
Похожие вопросы
Как бороться с обновленным фрагментом веб-пакета на сервере?
Как выделить отфильтрованное содержимое на основе входного значения поиска, а не по щелчку по алфавиту, используя angular2
Как реализовать локализацию i18n только в EJS и gulp?
В чем разница между Lottie Events и Lottie EventListeners и как их использовать?
Анимированная гистограмма не показывает переходы, только ключевые кадры в Plotly.js
Ошибка загрузки файла в easy-ftp с приложением electronic и node.js
Как выбрать текущую дату по умолчанию в дате типа ввода
Javascript выбрать сортировку по алфавиту
Как отфильтровать результаты из динамических данных с определенным условием
Почему мое условие if не работает должным образом даже в слушателе?
Спасибо за ваш ответ! Любые предложения, как получить идентификатор, который находится в первом столбце, если я нажму на редактирование?