i have a table that has many rows.
every tr tag in my table have data-id attribute.
and have some td inside and the td have button for show modal with bootstrap.
my table like this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr data-id="1">
<td>name</td>
<td>phone</td>
<td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
<td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
</tr>
<tr data-id="1">
<td>name</td>
<td>phone</td>
<td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
<td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
</tr>
</tbody>
</table>
i want to get data-id in tr parent of the buttons in my table with jquery
i try some code but all of them get the class of target modal path
i try this code
getDataSrc('.calls', 'data-src');
function getDataSrc(target, attr){
$(target).click(function(){
var id = $(this).parent().parent().attr(attr);
alert(id);
});
}
$('.btn').click(function(e){
e.preventDefault();
var id = $(this).parents('tr').data('id');
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr data-id="1">
<td>name</td>
<td>phone</td>
<td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
<td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
</tr>
<tr data-id="2">
<td>name</td>
<td>phone</td>
<td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
<td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
</tr>
</tbody>
</table>
This code will return you in console the id of the clicked element
You should create a function for button click, and from that function, you can access the parent dom for each using jQuery and also open bootstrap model.
function clickHandle(elm) {
alert($(elm).closest("tr"));
}
Related
I've tried several ways to get the row index of a clicked button inside a table.
The table:
while ($info = mysqli_fetch_array($sql)) {
echo "<tr>";
echo "<th>{$info['name']}</th>";
echo "<th>{$info['pass']}</th>";
echo "<th><a href='http://{$info['link']}'>{$info['link']}</a></th>";
echo "<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal' id='{$info['id']}'>Delete</button></div></th>";
echo "</tr>";
}
?>
These are the ways that I've tried:
$(document).on('click', '.delbuttons button', function(event) {
alert($(this).index());
}
but it always returns -1.
$(document).on('click','.delbuttons button', function(event) {
alert(this.rowIndex);
}
This returns undefined.
Your issue is in this line:
alert($(this).index());
According to the documentation:
.index(): Search for a given element from among the matched elements.
Because your button is the unique element contained in the div the correspondig result will be always 0.
In order to get the row index, instead, it is sufficient to get the index of the closest tr:
$(this).closest('tr').index()
In your second approach you try to get the rowIndex of the clicked button. But this attribute is related only to a table row element. Hence, in this case you will get undefined.
$(document).on('click','.delbuttons button', function(event) {
console.log($(this).closest('tr').index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>name1</td>
<td>pass1</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id1"> Delete</button>
</div>
</td>
</tr>
<tr>
<td>name2</td>
<td>pass2</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id2"> Delete</button>
</div>
</td>
</tr>
<tr>
<td>name3</td>
<td>pass3</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id3"> Delete</button>
</div>
</td>
</tr>
</table>
You could do:
$(document).on('click','.delbuttons button', function() {
console.log($(this).closest('tr').get(0).rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
</table>
try at this way:
$(document).on('click','.delbuttons button', function() {
console.log($(this).closest("tr").index(););
});
or try to
$(document).on('click','.delbuttons button', function() {
console.log($(this).parent().index(););
});
I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?
Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>
I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).
I have the following HTML code. I want the class 'moreDetails' to be shown only when the user clicks the 'View More' button
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td></tr>
<tr class = moreDetails>
<td>
Additional details
</td>
</tr>
<tr>
Here is my java script. I have tried all versions of next(), .parent(), prev() etc. I couldnt get it working. Can you please help?
function moreDetails(obj){
$(obj).closest('.currentRow').find('moreDetails').show();
}
Change find('moreDetails') to find('.moreDetails') .
$(obj).closest('.currentRow').find('.moreDetails').show();
OR
$(obj).parent().next().show();
OR
$(obj).parent().next('.moreDetails').show();
EDIT :
If the html is this
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td>
</tr>
<tr class = moreDetails>
<td> Additional details</td>
</tr>
Then use
$(this).closest('tr').next().show();
<tr class = moreDetails> is missing the quotes around the class name. It should be <tr class="moreDetails">
When the page loads, as per your requirement, you need to hide the <tr class="moreDetails" element. So, use style="display:none" to hide the div in initial state.
One of the solutions using Javascript only
function moreDetails(){
var moreDetailElement = document.querySelector(".moreDetails");
moreDetailElement.style.display = "inline";
}
<table>
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td><button type="button" class="btn btn-default" onclick="moreDetails()">View More</button></td></tr>
<tr class="moreDetails" style="display:none">
<td>
Additional details
</td>
</tr>
</table>
$('button').closest('.currentRow').next('.moreDetails').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="currentRow">
<td>John</td>
<td>Doe</td>
<td>johndoe#example.com</td>
<td>
<button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button>
</td>
</tr>
<tr class='moreDetails'>
<td>
Additional details
</td>
</tr>
<tr>
</table>
Use .closest() with .next().
Use .closest('.currentRow') or .closest('tr') to get the parent tr.
Use .next('.moreDetails') to get the tr you want to show
I have a table with several row and each row contain a delete button.
Now if we click on delete button , corresponding row is deleted/hidden from the table.
I want to implement alert "Do you want to delete ?"
if the answer is yes. Then only hidden the row ..
How we can achieve it..
<table>
<tr class="alert alert-dismissable" >
<td>
Item 1
</td>
<td>
<button data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>
</td>
</tr>
</table>
By using javascript (add an attribute in the HTML -> onclick="ConfirmDelete()" and define it in the JS), one can do like the following:
HTML:
<button data-dismiss="alert" onclick="ConfirmDelete()" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>
JS:
function ConfirmDelete() {
var result = confirm("Are you sure to delete?");
if (result) {
//User confirms to delete it
} else {
//User doesn't confirms to delete it
}
}
By Jquery you can do this-
Your Html-
<table>
<tr class="alert alert-dismissable" >
<td>
Item 1
</td>
<td>
<button data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" onclick="ConfirmDelete(this)">Delete</button>
</td>
</tr>
</table>
In JS
function ConfirmDelete(control) {
var Confirm = confirm("Want to delete?");
if (Confirm) {
$(control).parent().parent().css("display","none")
} else {
//User doesn't confirms to delete it
}
}
try with this below code it may help you
$(function(){
$('table').on('click','tr a',function(e){
e.preventDefault();
var result = confirm("Are you sure to delete?");
if (result) {
$(this).parents('tr').remove();} else { alert('You Canceled');}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<tr>
<td class="active">Item 1</td>
<td>Delete</td>
</tr>
<tr>
<td class="success">Item 2</td>
<td>Delete</td>
</tr>
<tr>
<td class="info">Item 3</td>
<td>Delete</td>
</tr>
</table>
you have to use javascript for DOM manipulation.
check the code here
don't use data-dismiss api for hiding rows. It hides row instantly and don't bother about the conditions and logic in click event listener.
I have a list of elements in a table. If a button is clicked a modal pops up and to show some content in that modal i need to get the id of the element that was clicked. How can i do that?
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<form action="" method="post">
<table class="table">
<thead>
<tr>
<td width="25%"><strong>Options</strong></td>
<td width="25%"><strong>Block id</strong></td>
<td width="25%"><strong>Block type</strong></td>
<td width="25%"><strong>Block order</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="8" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="editBlockBtn" data-target="#deleteBlock" data-block-id="8" class="btn btn-danger btn-mini"></button></td>
<td>8</td>
<td>image</td>
<td>1</td>
</tr>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="9" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="deleteBlockBtn" data-target="#deleteBlock" data-block-id="9" class="btn btn-danger btn-mini"></button></td>
<td>9</td>
<td>image</td>
<td>2</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
You can just write the ID again into a data-attribute on each button. Then you have easy access using jquery's data method. Like so:
PHP:
<button data-toggle="modal" data-target="#editBLock" data-block-id="<?php echo $block['id']; ?>" class="btn btn-warning btn-mini"><i class="icon-edit icon-white"></i></button>
JavaScript:
$('button').click(function() {
var clickedId = $(this).data('block-id');
});
If you can not change your PHP code, and the structure in your table is fixed, you can do it like this:
$('button').click(function() {
var clickedId = $(this).parent().next('td').text();
});
first: id="" is Unique, You can not use it twice in two elements. so change These to classes: editBlockBtn and deleteBlockBtn.
so if you want to get the <td>'s content It is better to add them a class like:
<td class="Block-id">9</td>
<td class="Block-type">image</td>
<td class="Block-order">2</td>
now You can easily get the closest() <tr> parent (or just use parent()):
$('.editBlockBtn').click(function() {
var parentTr = $(this).closest('tr');
});
then you can get the content:
var block_id = parentTr.find('.Block-id').text();
var block_type = parentTr.find('.Block-type').text();
var block_order = parentTr.find('.Block-order').text();
demo: http://jsfiddle.net/gbpkxbvv/