Passing values to jquery function on click of button - javascript

I have the following table in my HTML page, I'm a newbie to Jquery
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
As you can see there is an edit button I can write a function to recognize clicks to this button as given below
$('.editBtn').click(function(){
alert("test");
});
I also need the data in the particular row for some processing in the function. How can I get this data from the table row. Please feel free to suggest if there is a better way.
I saw the question here but I did not understand this statement of the answer.
var id = $(this).attr('id');
How is the id passed to the function. What specifies the id in this.
<input id="btn" type="button" value="click" />


Because you probably need all <td> in row, except current one I would suggest to use siblings() method of closest <td>:
$('.editBtn').click(e => {
e.preventDefault();
const $td = $(e.target).closest('td');
const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
console.log(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>

Related

How can I hide my table when I click in the sidebar? and Also when I click the button to show another table the current open table will close?

I have different table in every button, and I hide the table by putting the visibility to hide in the css, when I click the button the table will show. The problem is when I click the button again it won't hide the table anymore. And another thing is when I click the other buttons the table which is currently showing will hide then another table will show.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}
#Patient-Table {
visibility: hidden;
}
<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>

function patienttoggle() {
let patientTable = document.getElementById("Patient-Table");
if(patientTable.style.display == "none") {
patientTable.style.display = "block";
}else{
patientTable.style.display = "none";
}
}
Heres my upadted JS CODE

Angular ng-repeat doesn't show items

I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

Get ID of the specific button that is clicked.

I have a table and inside the table one of the column contains a button and for each row the button id will be different. The id is data-binded using angular {{}}. on the button element i have a function called MarkasRead() that will be called on click. When i try to retrieve the id for it it shows undefined and i really need that id inside the function call to do more work.
Listed is the table code and function call.
<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
<thead>
<tr>
<th></th>
<th>From</th>
<th>Date</th>
<th>Subject</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody *ngFor="let message of receivedMessages">
<tr *ngIf="message.mDeleted == '0' ">
<td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
<td> {{message.messageFrom}}</td>
<td> {{message.createdDate}}</td>
<td> {{message.subject}}</td>
<td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
<i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
<td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead()">Mark as Read</button>
</td>
</tr>
</tbody>
</table>
MarkasRead(){
alert(this.id); // or alert($(this).attr('id'));
}

To do this, you need to pass the id as a parameter to the MarkasRead function as "MarkasRead(message.$key)" and then define the function underneath as:
function MarkasRead(value)
{
alert(value);
}

You can do like this.Pass the $event object from the button event handler
<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>
In component
MarkasRead(event) {
var target = event.target || event.srcElement || event.currentTarget;
var elemId = target.attributes.id;
}

<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>
MarkasRead(event){
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
}

You can define a parameter at MarkasRead function and pass this
function MarkasRead(el) {
alert(el.id)
}
(click)="MarkasRead(this)"

try changing
(click)="MarkasRead()"
to
(click)="MarkasRead(event)"
And using function
function MarkasRead(e) {
alert(e.target.id);
}

<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
<thead>
<tr>
<th></th>
<th>From</th>
<th>Date</th>
<th>Subject</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody *ngFor="let message of receivedMessages">
<tr *ngIf="message.mDeleted == '0' ">
<td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
<td> {{message.messageFrom}}</td>
<td> {{message.createdDate}}</td>
<td> {{message.subject}}</td>
<td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
<i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
<td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead({message.$key)">Mark as Read</button>
</td>
</tr>
</tbody>
</table>
MarkasRead(id) {
alert(id)
}

Sort data in jQuery by specific attribute

I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>

The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>

Delete td of table htm with jquery

hi guys i have a question, i need remove a td of table, the td has a id and i try with remove(), but doesnt work this is my code in js
$('.btnEliminarLicencia').off('click');
$('.btnEliminarLicencia').on('click', function () {
$(this).parent().parent().remove();
var rlim=$('.btnEliminarRemoto').parent().parent().remove('#idLicenciaClienteR');
alert (rlim);
});
and i have two tables, in the first with the btnEliminarLicencia click remove the tr of table and in the second table delete also the td what is the first td of table , this is the code, i need delete the first table and a specific td
first table
<table class="table table-bordered tabla_licencia">
<thead>
<tr>
<th>Sucursal</th>
<th>Codigo (ID cliente)</th>
<th>Licencia</th>
<th>Caducidad</th>
<th>Estado</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="318">13123</td>
<td id="id_Cliente">18865082</td>
<td>482947</td>
<td>2016-11-04</td>
<td>
<input type="checkbox" class="form-control" checked="" disabled="">
</td>
<td>
<button type="button" class="btn btn-info btnEditLicencia" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarLicencia" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
second table
<table class="table table-bordered tabla_remoto">
<thead>
<tr>
<th>Licencia</th>
<th>Descripcion</th>
<th>Usuario</th>
<th>Clave</th>
<th style="width: 15%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td id="idLicenciaClienteR">18865082</td>
<td>Caja</td>
<td>883792</td>
<td>nim3</td>
<td>
<button type="button" class="btn btn-info btnEditRemoto" style="float:right;">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-danger btnEliminarRemoto" style="float:left;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
in this case delete <td id='idLicenciaClienteR'>189992887</td>
as might do it, thanks

This might help you,
$('.btnEliminarLicencia').on('click', function () {
$('td#idLicenciaClienteR').remove();
});
Since id is unique in a page, you can dirctly use the id, no need to find with .parents().

Try something like this:
$('table td#id_Cliente').remove();
you can also define the class by putting .yourClass behind table

Categories

Resources