Get row index of clicked button properly - javascript

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(););
});

Related

get parent a clicked modal in jquery

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"));
}

adding a new cell to a table using javascript

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();
}

How we can prevent the row hidden

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.

Can not hide the button of table row using Angular.js

I am getting one issue while trying to hide button after a button click using Angular.js.I am explaining my code below.
<tbody id="detailsstockid">
<tr ng-repeat="code in ListOfGeneratedCode">
<td>{{$index+1}}</td>
<td>{{code.name}}</td>
<td>{{code.no_of_voucher}}</td>
<td>{{code.expired_date}}</td>
<td>{{code.voucher_amount}}</td>
<td>
<input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);">
</td>
<td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
<td>
<input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
</td>
<td ng-hide="editButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
</a>
</td>
<td ng-hide="delButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
</a>
</td>
</tr>
</tbody>
My controller side code is given below.
$scope.sendVoucherCode=function(voucherCodeId){
$scope.editButton=true;
$scope.delButton=true;
}
Here my problem is when user is clicking on Send all row's edit and delete button has disappearing.I need when user will click on send button the respective row's edit and delete button should disappear.Please help me.
The existing code needs some modification as the key for edit and delete is same, so it clears the whole. Please refer the code below:
HTML
<tbody id="detailsstockid">
<tr ng-repeat="code in ListOfGeneratedCode">
<td>{{$index+1}}</td>
<td>{{code.name}}</td>
<td>{{code.no_of_voucher}}</td>
<td>{{code.expired_date}}</td>
<td>{{code.voucher_amount}}</td>
<td><input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);"></td>
<td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
<td>
<input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
</td>
<td ng-hide="code.editButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
</a>
</td>
<td ng-hide="code.delButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
</a>
</td>
</tr>
</tbody>
JS
Add this after $scope.ListOfGeneratedCode has been instantiated.
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
value.push('editButton', false);
value.push('delButton', false);
});
Append/change the existing methods with:
$scope.sendVoucherCode = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.editButton = $scope.delButton = true;
}
});
}
$scope.editVoucherCodeData = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.editButton = true;
}
});
}
$scope.deleteVoucherCodeData = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.delButton = true;
}
});
}

Get value from clicked button with modals

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/

Categories