We Keep Coding

How would i grey out the rest of the text in my table record when i select the 3rd option in my drop down menu?

I'm currently trying to make my other table items grey out when i select the third option in my table menu which is called "closed" with an id of 3.
This is in the status drop down menu as seen here.
I'm trying to figure out how to make the CaseID, date, name, details and Status sections become greyed out, when the status part of the table record is "closed".
<% include ../partials/header.ejs %>
<% include ../partials/main_nav.ejs %>
<!-- MAIN CONTENT -->
<div class="jumbotron">
<div class="container">
<div class="reportContainer">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<h1 class="display-4">Incident Reports</h1>
<br />
<!-- Details of the table and how to submit new reports -->
<p>The information below is the current incident reports that have been submitted.<p>
<p> To add a new report, click here or use the <strong>Create a Report</strong> button below.<br>
To edit a report, a report, use the Edit button.<br>
To delete a report, click the <strong>Delete</strong> button. This is instant, permanent, and will not ask for confirmation.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>CaseID</th>
<th class="text-center">Date</th>
<th class="text-center">Name</th>
<th class="text-center">Details</th>
<th class="text-center">Status</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<!-- Template Row -->
<% for (let count = 0; count < incident_reports.length; count++) { %>
<tr>
<td ><div id="creditcard"><%= incident_reports[count].caseID %></div></td>
<td class="text-center"><div id="creditcard"><%= incident_reports[count].date %></div></td>
<td class="text-center" ><div id="creditcard"><%= incident_reports[count].name %></div></td>
<td class="text-center" ><div id="creditcard"><%= incident_reports[count].details %></div></td>
<td class="text-center"><div id="creditcard">test<%= incident_reports[count].Status %></div></td>
<td class="text-center">
<a href="/reports/edit/<%= incident_reports[count]._id %>" class="btn btn-primary" style="background-color: #f59e2e; border-color:#f59e2e;"
><i class="fa fa-plus"></i> Edit</a
>
<a href="/reports/delete/<%= incident_reports[count]._id %>" class="btn btn-warning btn-sm" style="background-color: #ff3e3e; color: white; border-color: #ff3e3e;">
<i class="fas fa-trash-alt"></i> Delete</a>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Status
</button>
<ul class="dropdown-menu" onChange="selectChanged()">
<li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="payment-method" value="1">In Progress</a></li>
<li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="payment-method" value="2">Dispatched</a></li>
<li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" id="payment-method" value="3">Closed</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</main>
<i class="fa fa-plus"></i> Create a Report
<div class="col-md-offset-1 col-md-10 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function selectChanged() {
var x = document.getElementById("payment-method").value;
document.getElementById("creditcard").disabled = (x == 1);
}
</script>
<% include ../partials/bottom_nav.ejs %>
<% include ../partials/footer.ejs %>
Thank you in advance.

HTML
add data-status attribute for every rows to keep track of current status.
...
<tbody>
<!-- Template Row -->
<% for (let count = 0; count < incident_reports.length; count++) { %>
<tr data-status="<%= incident_reports[count].Status %>">
<td>
<span> <!-- 👈 add span tag to change text color. -->
<%= incident_reports[count].caseID %>
</span>
</td>
<td class="text-center" for="payment-method">
<span>
<%= incident_reports[count].date %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].name %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].details %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].Status %>
</span>
</td>
<td class="text-center">
<a href="/reports/edit/<%= incident_reports[count]._id %>" class="btn btn-primary" style="background-color: #f59e2e; border-color:#f59e2e;"><i class="fa fa-plus"></i> Edit</a
>
<a href="/reports/delete/<%= incident_reports[count]._id %>" class="btn btn-warning btn-sm" style="background-color: #ff3e3e; color: white; border-color: #ff3e3e;">
<i class="fas fa-trash-alt"></i> Delete</a>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Status
</button>
<ul class="dropdown-menu" onChange="selectChanged()">
<li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="1">In Progress</a></li>
<li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="2">Dispatched</a></li>
<li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" id="3">Closed</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<% } %>
</tbody>
...
CSS
add this rule in css to select <tr> that has data-status="Closed".
...
tbody tr[data-status="Closed"] td > span {
color: gray;
}
...

reordering datable will mix values

I work wit DataTables and would like to realize drag and drop reordering.
My Code a the moment:
HTML
<div class="table-responsive">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS
var tablePositionen = $('#tablePositionen').DataTable({
columnDefs: [
{ targets: [0], orderable: true, className: 'reorder' },
{ targets: '_all', orderable: false }
],
"ordering": false,
"paging": false,
rowReorder: true,
"lengthMenu": [[10], [10]],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
My Table looks like this:
And If now drag and drop the second row above the first row, the other columns values will not be the correct one:
Where is my mistake??

The changes I made to resolve your issue:
(1) Added a "sequence" column as the first column in the table.
(2) Changed the DataTable initialization options to hide that sequence column, and, instead, allow the user to perform a drag from anywhere in a row (as opposed to the default location which is the first column only).
(3) Removed the remaining unneeded options (although you can add back anything you need such as "paging": false). Note that some options contradicted each other, such as paging and lengthMenu.
(4) Made a minor change to the language URL (too many forward slashes). This is not relevant to the drag/drop issue.
Here is the result:
$(document).ready(function() {
var tablePositionen = $('#tablePositionen').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [
{ targets: 0, visible: false }
],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- row reorder -->
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/>
</head>
<body>
<div style="margin: 20px;">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Seq.</th>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Just to add: All of the row reorder examples use an initial column to support reordering (the Seq. column I added). This is required - although I don't recall seeing this explicitly mentioned in the documentation. For your case, I chose to hide this initial (but required) column, and use the "full row" drag option.

Get id of clicked row

I am using "jquery": "^3.4.0" and DataTables 1.10.18.
I am having the following table:
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(() => {
var c = this.id
console.log(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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
I am trying to put a click listener on the clicked edit button.
However, I currently only get undefined back. Instead I would like to get the id within the first column back.
Any suggestions what I am doing wrong?

I just use your code as example and make some changes in jQuery.
Please try this, hope this works for you.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
$(document).on("click", "#edit-row", function(){
console.log('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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.
Check this answer for more information.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function(event) {
var c = this.id;
console.log(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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function() {
var c = this.id
console.log(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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target.
To get the id that you have in the first column you can find the closest table row then select the first table column to get that text value.
You need to use a class selector for all those rows instead of id selector #edit-row as id should be unique in the HTML page.
$(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.log(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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</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">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you

Considering your ultimate goal (editable DataTable), I'll allow myself to suggest few improvements to your app, so that you don't really need to get id of clicked row and do all the HTML heavy lifting on your own.
Instead of using external AJAX-call to populate your DataTables, I'd recommend to use embedded ajax option
$("#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: ''
}
})
use columns.render option to modify cell contents, to make it appear as a badge or drop-down menu
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>`
}
...
]
})
and essential point - leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row
$("#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">
<i class="icon-pencil"></i>Edit
<i class="icon-bin"></i>Delete
</div>
</div>
`
}
]
});
use above row numbers in order to modify target table row, using DataTables API methods (e.g. row().remove() for deletion), I'll use simplest example (deletion of the row in the front-end), since you didn't share much details as for whether you want to modify both back end and front end data or only the latter
//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();
});
Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser's Dev Tools, using this link.
P.S. if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties ('id', in particular) of clicked row

Ajax post method not updating the page

Trying to pass an attribute value to PHP through an jQuery post method. It is successful according to the console.log but the page is not refreshing the $_POST value on the page. However, it shows in the data on success.
jQuery post data:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dracanon Application</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
</head>
<body>Array
(
[id] => 22
)
data from ajax post:22<br/><form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>bwilson</td><td>Bracchius</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='22'>Review</button></td></tr><tr><td>dcaldessa</td><td>sojurne</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal'
data-target='#view_detail_modal'
data-requestid='23'>Review</button></td>
</tr>
<!--<script>
$(document).ready(function () {
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
console.log(window.location);
$.ajax({
type:"POST",
url: "../index.php",
data: {id: 13},
success: function (data) {
console.log("data-resolved");
}
});
});
});
</script>--> </tr>
</tbody>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<div class="display-limit">
<div class="btn-group page-limit">
<button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
<span>10</span><span class="caret"></span>
</button>
<input type="hidden" id="limit-selection" name="limit-selection" />
<ul class="dropdown-menu limit-selector" role="menu" >
<li>5</li>
<li>10</li>
<li>25</li>
<li>50</li>
<li>All</li>
</ul>
<script>
$('.limit-selector li a').click(function (e) {
var value = $(this).data("value");
$('#limit-selection').val(value);
document.getElementById("classForm").submit();
});
</script>
</div>
</div>
<div class="button-container">
<script>
/* limit page dropdown */
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
});
/* End limit page dropdown */
</script>
</div>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</thead>
</table>
</div>
</div>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
so it shows that the data is being returned but it is not refreshing the $_POST array to display the values on the screen.
Below is the original form:
<?php
include "includes/header.php";
include "includes/functions.php";
print_r($_POST);
if (isset($_POST['id'])){
print_r("data from ajax post:".$_POST['id']."<br/>");
}else if (isset($_POST['id'])){
echo "data not found";
}
if (!isset($_SESSION['requestlimit'])) {
$_SESSION['requestlimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['requestlimit'] = $_POST['limit-selection'];
}
}
if (!isset($_SESSION['archivelimit'])) {
$_SESSION['archivelimit'] = 10;
}else if (isset($_POST['limit-selection'])){
if($_POST['limit-selection'] != null) {
$_SESSION['archivelimit'] = $_POST['limit-selection'];
}
}
$start=0;
$limit=$_SESSION['archivelimit'];
if(isset($_GET['pid']))
{
$id = $_GET['pid'];
$start = ($id-1)*$limit;
}
else
{
$id=1;
}
?>
<form name="test" method="post" action="">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
<li><a data-toggle="tab" href="#archive">Archive</a></li>
</ul>
<div class="tab-content">
<div id="newaltrequest" class="tab-pane fade in active">
<h3>New Requests</h3>
<table class="table table-striped" id="application-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
<tbody>
<tr>
<?php include "includes/alt_requestlist.php"?>
</tr>
</tbody>
</thead>
<?php /*include "includes/view_alt_request.php" */?>
</table>
</div>
<div id="archive" class="tab-pane fade">
<h3>Archive</h3>
<table class="table table-striped" id="archive-table">
<?php include "includes/pagelimit_button.php"?>
<thead>
<tr>
<th>Username</th>
<th>Alt Character</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<script>
$(document).on('click','.reviewbutton',function () {
var requestid = $(this).attr('data-requestid');
var value = {id: requestid};
console.log(window.location);
$.post("testing.php",value, function (data) {
console.log(data);
});
});
</script>
</body>
</html>
Could I get some suggestions or assistance in the right direction to resolving this issue?

The $_POST variable is evaluated at the serer side when you request the page. When you do the AJAX request, the $_POST variable is evaluated in a separate page, which returned values will be evaluated on the browser side in the success method. The $_POST variable will therefor not be updated, but you should use javascript or jQuery to process the returned value and place them in your page at the positions of where the values of the $_POST variable are.

StickyX element without float

I am trying to make UL.pagination to be in the center of the view-area of the parent, without using float as it will interrupt my style.
Would this possible?
I am not familiar with SO yet, but my point is to trigger scrollLeft of .pagination parent to keep pagination in the center of its parent.
This is my try on jsFiddle
/* my goal is to make pagination in the center of the view-area */
$.fn.StickyX = function() {
// alert(this.parentNode.clientWidth);
// alert($(this).parent().innerWidth());
return this.css({
'margin-left': ($(this).parent().innerWidth() / 2) - ($(this).width() / 2) + 'px',
'position': 'inline'
});
};
$('.pagination').StickyX();
#dataTable .pagination {
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="wrapper">
<div id="header">
Header
</div>
<div class="row">
<div class="col-xs-9 contents">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed" id="dataTable">
<thead class="text-primary">
<tr>
<th role="group" aria-label="">
<button type="button" class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus"></i>
</button>
<button type="button" class="btn btn-default btn-refresh"><i class="glyphicon glyphicon-refresh"></i>
</button>
</th>
<th>id</th>
<th>User name</th>
<th>password</th>
<th>Full name</th>
<th>Email</th>
<th>URL</th>
<th>Join date</th>
<th>activation_key</th>
<th>lastupdate</th>
<th>status</th>
<th>groupID</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>1</td>
<td>admin.admin</td>
<td>**********</td>
<td> </td>
<td> </td>
<td> </td>
<td>2015-12-07 02:37:47</td>
<td> </td>
<td>2015-12-06 18:37:47</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>Super Admin</td>
</tr>
<tr id="row-2">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>2</td>
<td>demo.demo</td>
<td>***********</td>
<td> </td>
<td> </td>
<td> </td>
<td>0000-00-00 00:00:00</td>
<td> </td>
<td>2016-01-05 12:45:32</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>demo</td>
</tr>
<tr>
<td class="page-control" colspan="13">
<ul class="pagination">
<li class="disabled">
<a href="#Prv" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">1<span class="sr-only">(current)</span>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>
<a href="#Nxt" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="col-xs-3">
[Menu]
</div>
</div>
<div>
Footer
</div>
</div>
I made some modification js which some how solve the issue, but still need some more help.
jsfiddle
(function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
$.fn.hasScrollBar = function() {
var e = this.get(0);
return {
vertical: e.scrollHeight > e.clientHeight,
horizontal: e.scrollWidth > e.clientWidth
};
}
})(jQuery);
$.fn.StickyX = function() {
var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first();
if(parentWithScroll) {
var e = $(this);
parentWithScroll.scroll(function() {
e.css('margin-left', ($(this).width() / 2) - (e.width() / 2) + $(this).scrollLeft() + 'px');
})
return this.css('margin-left', (parentWithScroll.width() / 2) - ($(this).width() / 2) + parentWithScroll.scrollLeft() + 'px');
} else {
return this.css('margin-left', 'auto;');
}
};
$('.pagination').StickyX();

to achieve this you only need css and html.
Try this:
td.page-control { text-align:center; }
ul.pagination { margin:0 auto; }
Adapt the code to make sure it's not overridden by your existing styles.
And disable the javascript that is adding the margin to the ul
https://jsfiddle.net/ksqzpfm9/1/
You can use the same method to horizontally center other elements