Reputation: 237
<section class="p-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<table class="table table-hover text-center" id="data-table">
<thead class="bg-dark text-white">
<tr>
<th>S.NO</th>
<th>NAME</th>
<th>CATEGORY</th>
<th>DETAILS</th>
</tr>
</thead>
<tbody id="data-table-body">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
for (var i = 0; i < data.projects.length; i += 1) {
$("#data-table-body").append('<tr id="tr-dt'+i+'">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>'
+ data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='showMembers()'> click here </button>" + '</td>' + '</tr>');
}
I have created a table dynamically, and my last column is a button. Each row has a button. My problem is when I click on that button, get that row value.
How to get row value when I click each button. How to achieve solve my case? Thanks
Upvotes: 1
Views: 245
Reputation: 3842
const data = {
projects: [{
name: 'A',
category: 'CTG'
}, {
name: 'B',
category: 'CTG'
}]
};
for (var i = 0; i < data.projects.length; i += 1) {
$("#data-table-body").append('<tr id="tr-dt' + i + '">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>' +
data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='get_data(" + i + ")'> click here </button>" + '</td>' + '</tr>');
}
function get_data(index) {
console.log(data.projects[index]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="p-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<table class="table table-hover text-center" id="data-table">
<thead class="bg-dark text-white">
<tr>
<th>S.NO</th>
<th>NAME</th>
<th>CATEGORY</th>
<th>DETAILS</th>
</tr>
</thead>
<tbody id="data-table-body">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
Upvotes: 0
Reputation: 21475
Add event
to click event:
onclick='showMembers(event)'
Then use data attributes to store any data you want in a html element, so you can use dataset
to retrieve it:
'<tr data-id="tr-dt'+i+'">'
Event
will have your target element:
function showMembers(e) {
e.target // <- the clicked button
}
Navigate to the desired element:
e.target.parentNode.parentNode
^ btn ^ td ^ tr
Get the desired data from dataset
:
e.target.parentNode.parentNode.dataset.id;
function showMembers(e) {
console.log(e.target.parentNode.parentNode.dataset.id);
}
<table>
<tr data-id="1">
<td>#1</td>
<td><button type="button" onclick="showMembers(event)">Click here</button>
</tr>
</table>
Upvotes: 0
Reputation: 10204
When calling showMembers
function on each button, you can simply pass i
value and using that index
, you can get the selected projects value as follows.
const data = {
projects: [
{ name: 'Name1', category: 'Category1' },
{ name: 'Name2', category: 'Category2' },
{ name: 'Name3', category: 'Category3' },
{ name: 'Name4', category: 'Category4' }
]
};
for (var i = 0; i < data.projects.length; i += 1) {
$("#data-table-body").append('<tr id="tr-dt' + i + '">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>' +
data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='showMembers(" + i + ")'> click here </button>" + '</td>' + '</tr>');
}
function showMembers(index) {
console.log(data.projects[index]);
}
<section class="p-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card bg-light">
<div class="card-body">
<table class="table table-hover text-center" id="data-table">
<thead class="bg-dark text-white">
<tr>
<th>S.NO</th>
<th>NAME</th>
<th>CATEGORY</th>
<th>DETAILS</th>
</tr>
</thead>
<tbody id="data-table-body">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Upvotes: 1
Reputation: 422
You could insert an argument in the onlick function so the code will execute with that parameter. For example you can think of using the index of the element in the data.projects array and then using it in the showMembers function
for (var i = 0; i < data.projects.length; i += 1) {
$("#data-table-body").append('<tr id="tr-dt'+i+'">' +
'<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>'
+ data.projects[i].category + '</td>' + '<td>' + "
<button class='btn btn-outline-dark btn-sm' onclick='showMembers("+i+")'> click here
</button>" + '</td>' + '</tr>');
}
function showMembers(n) { console.log(data.projectes[n] }
Also i suggest you to use these quotes `` when using js, this allows you to rewrite
"<button class='btn btn-outline-dark btn-sm' onclick='showMembers("+i+")'> click here </button>"
as
`<button class='btn btn-outline-dark btn-sm' onclick='showMembers(${i})'> click here </button>`
Upvotes: 0