We Keep Coding

How to get the row id onClick in jQuery/JavaScript?

I have a table populated with dynamic data. the last column has a button which when I click I would like to pass the row id to the JS function.
I need the id because I am doing a POST Ajax request and on success I want to take the response data and update the selected row with new data.
This is what I would do to insert a new row:
var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();
but what can I do to get the row ID and update it with the response data?
EDIT. Datatable:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach (get_all_customers_list() as $user) { ?>
<tr>
<td>
<b> <?php echo $user["recipient_name"]; ?></b>
</td>
<td>
<?php echo $user["registration_date"]; ?>
</td>
<td>
<button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>
</td>
</tr>
<?php }?>
</tbody>
</table>

Since you are only wanted to get the row id of the clicked row edit button. You can simply use table.row function and pass the actual tr of the clicked button.
Demo (Showing the actual id (1, 2) which is stored as name)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//Getting the actual table ID
var row = $(_this).parents('tr')[0];
//Data table row id
console.log(table.row(row).data()[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
Demo (Showing the actual index of table - Index start from 0 to depending on how many rows you have)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//get the closest of clicked edit button
var tr = $(_this).closest("tr");
//get the index of row
var rowindex = tr.index();
//Index of row
console.log(rowindex)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>

this is my simple answer:
var table = $('#table-values');
$('#table-values').on( 'click', 'tr', function(){
var id = this.id;
alert( 'Clicked row id '+id );
});
Easy. :)

Javascript table filter doesn't show table headers

Im using a script to filter a table based on a select value. The script works, the only problem is that it filter also the headers of the table, which Id like to show always.
This is the javascript and the table:
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>
My question is: How can I edit the script to show the headers?
Thank you for your time :D
let me know if I have to explain the situation better.

you can add a more specific selector :
var dataset = $('table tbody tr');

Please find the below solution with output.
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return index !== 0 && $(item).find('td:last-child').text().split(';').map(x => x.trim()).indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDA; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}

This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

jQuery Datatables, editing selected row's td with text box

I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();

Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>

when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page

i have a table when the table row is selected.i want that particular row to be appended in another table.
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>

There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>

EDIT: Used loop instead repeating
Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})

<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.

$('#myModal').modal('toggle');
$(document).on('change', 'input[type="checkbox"]', function(e){
if($(this).is(":checked"))
{
var row = $(this).closest('tr').html();
$('.table2 tbody').append('<tr>'+row+'</tr>');
}
else
{
$('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
}
$('#row').on('click', ':checkbox', function (event) {
$(this).closest('tr').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="col-md-6">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<table class="table1 table table-bordered" id="echo">
<h3 style="text-align: center;"></h3>
<tr>
<td>1</td>
<td name="echo">A</td>
<td>1500</td>
<td><input type="checkbox" value="1" class="check-box"></td>
</tr>
<tr>
<td id="2">2</td>
<td name="fetal_echo">B</td>
<td>2000</td>
<td><input type="checkbox" value="2" class="check-box"></td>
</tr>
<tr>
<td id="1">3</td>
<td value="abc">C</td>
<td>8500</td>
<td><input type="checkbox" value="3" class="check-box"></td>
</tr>
<p id="output"></p>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button>
</div>
</div>
</div>
</div>
<table class="table2 table table-bordered" id="row">
<tbody>
</tbody>
</table>
<div>
#vijay mishra and #Vishnu Bhadoriya thankyou for your support....You are really awesome.