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.
Related
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"));
}
I have a button which is named reject and when it is clicked it is supposed to show a form with a text and another button.
Everything is working fine except it only add a cell to the first row only, no matter where the reject button is or whether it in the second or third row it will show the new cell after the first row.
i want the small form to be added in the same row where the reject button was clicked.
this my code:
<table asp-controller="Home" asp-action="Pending" class="table table-bordered table-sm table-striped" id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Status</th>
<th>Check Time</th>
</tr>
</thead>
<tbody id="demo">
#if (Model == null)
{
<tr>
<td colspan="7" class="text-center">No Model Data</td>
</tr>
}
else
{
#foreach (var p in Model)
{
<tr>
<td>#p.Id</td>
<td>#p.Email</td>
#if (#p.CheckOut == null)
{
<td>Offline</td>
<td>#p.CheckIn</td>
}
else
{
<td>Online</td>
<td>#p.CheckOut</td>
}
<td>
<button name="button" value="accept" asp-action="Accept" asp-route-id="#p.Id" class="btn btn-success">Accept Request</button>
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun()">Reject Request</button>
</td>
<td style="display:none;" id="comment">
<form >
<input type="text" name="newcomment" id="newcomment" />
<button name="button" value="reject" asp-action="Reject" asp-route-id="id" class="btn btn-primary">Comment</button>
</form>
</td>
</tr>
}
}
</tbody>
</table>
<script type="text/javascript">
function fun() {
document.getElementById("comment").style.display = 'block';
}
You can use JQuery to show the td area .
Firstly , modify this line :
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun()">Reject Request</button>
To
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun(this)">Reject Request</button>
And modify your js function to find the next td of current button :
function fun(elem) {
$(elem).closest('td').next('td').show();
}
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 are the 2 scripts that I would like to run when the Select button is clicked in either table (first script for the top table and 2nd script for the 2nd table):
$(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);
});
});
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateAccessories.php', {
itemID: itemID
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
if ($this.closest('tr').hasClass("success")) {
$this.closest('tr').removeClass("success");
} else {
$this.closest('tr').addClass("success");
}
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
At the moment clicking either button runs both scripts which I can understand as they both meet the criteria for:
$('button.btn-success:not([type="submit"])').click(function() {
but I'm not experienced enough to know how to make the necessary changes to have each button run a different script here?
A very basic way to differentiate between buttons would be to add an attribute called "id" to them.
<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>
Now you can reference each like this:
$('#button1').click(function() { ...
$('#button2').click(function() { ...
If you can change the markup then add a class from main and another for accessories in the button and do $('button.main') and $('button.accessories') instead of $('button.btn-success:not([type="submit"])')
If not then you need to be able to discern one from another.
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function(e) {
var t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
if(t.indexOf("Main") !== -1) {
// Has MAIN - put your main code in here
console.log("main stuff");
} else if (t.indexOf("Accessories") !== -1) {
// It's Accessories - put your accessories code in here
console.log("accessories stuff");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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 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/