I have a table, in the row, the element is an image
Upon hover it changes colour.
1) I am new to Angular, and I am not sure how to write a directive to dynamically change the image to a custom one depending on which table row has been hovered on. So for example if there are 5 table row, the hover colour will be different depending on which one has been hovered over.
Here is my table code:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2">
<span></span>
</th>
<th class="col-xs-8" ng-click="sort('firstName')">
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th class="col-xs-2">
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>
<!--img class="round" src="/images/profile-placeholder.jpg" width="50" height="50">
</img> -->
<img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
</td>
<!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></img></td> -->
<td>
<div style="padding-top:1em"><span>{{user.firstName}}</span>
<br>{{user.lastName}}
<br>{{user.profession}}</div>
</td>
<td>
<div style="padding-top:1em">
<img src="images/arrow-right-pink.png" width="50" height="50"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my directive:
app.directive('hoverBgImage',function(){
return {
link: function(scope, elm, attrs){
elm.bind('mouseenter',function(){
]
});
elm.bind('mouseleave',function(){
})
}
};
});
In my directive I am not sure how to only select and apply changes to the image element for the row I have hovered over.
I can do this
$('img').image = 'new path'
in the mouse enter function but that will affect all images.
How can I do this, thanks.
Related
I'm trying to bind KnockoutJS ViewModel to a datatable:
JsFiddle
<table class="table table-sm" id="user">
<thead>
<tr role="row">
<th>Id</th>
<th width="30%" class="text-uppercase">Email</th>
<th width="15%" class="text-uppercase">Active</th>
<th width="2%" class="text-center text-uppercase">Edit</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: users() -->
<tr>
<td data-bind="text: $data.id"></td>
<td data-bind="text: $data.email"></td>
<td data-bind="text: $data.isDisabled"></td>
<td class="text-center" data-bind="toggleClick: $root.showDialog"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
When a user click the edit on each row it opens a modal dialog, where the data can be edited.
How do I bind the clicked row data to modal dialog form?
so I can do this:
<div class="modal-body" data-bind="with: User">
<input data-bind="text: email" />
<input data-bind="text: isDisabled" />
</div>
First off I would replace that toggleClick custom binding with a normal click function on your view-model as you really want to do more than just toggle the dialog. With a click function you can then access the row data that was clicked on, and then use that to set a current/selected user.
self.toggleClick = function(data){
self.showDialog(!self.showDialog());
self.selectedUser(data);
}
Example: https://jsfiddle.net/0vou6xs0/6/
You can then use a with binding like you had using the selected-user.
<div class="modal-body" data-bind="with: selectedUser">
<input data-bind="value: email" />
<input data-bind="value: isDisabled" />
</div>
I am trying to remove a class to a parent td from a child button element thru jQuery. I can remove the class when the outer tr element is clicked with no problem but when trying to add the class back to the parent td it doesn't do anything. When debugging it seems to work. I am trying to do it without reloading the page hence the preventDefault method on the button click. Any ideas on what might be causing the issue?
My html is this:
<div class="panel panel-default">
<table id="order" class="table table-hover table-bordered">
<thead class="table-header">
<tr>
<th class="text-center">
Order Number
</th>
<th class="text-center">
Project Number
</th>
</tr>
</thead>
<tbody>
<tr class="click">
<td id="orderNumber">
1313
</td>
<td>
50
</td>
<td id="td1313" class="hidden">
<div class="verify-box">
<div class="window">
<button class="close">
X
</button>
<span class="title">
Verify Order
</span>
<div class="panel panel-default">
<table class="table table-hover table-bordered">
<thead class="table-header">
<tr>
<th>
Item Number
</th>
<th>
Item Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
123456
</td>
<td class="text-center">
Description
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" type="button" onclick="window.print()">
Print
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here is the javascript:
$('.click').on('click', function() {
var $td = $(this).find('#orderNumber');
var td = "#td" + $td.text().trim();
$(td).removeClass('hidden');
});
// Closes verification window
$('.close').on('click', function(e) {
e.preventDefault();
var $td = $(this).closest('td');
$td.addClass('hidden');
});
I have also including fiddle
https://jsfiddle.net/tspuq9vo/3/
You've set the click class on the tr causing it to get fired straight after the click event for the close button.
As a quick fix you can stop the click event from propagating by using
$('.click').on('click', function() {
var $td = $(this).find('#orderNumber');
var td = "#td" + $td.text().trim();
$(td).removeClass('hidden');
});
// Closes verification window
$('.close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $td = $(this).closest('td');
$td.addClass('hidden');
});
Otherwise you should really only target the clickable td-s directly
As you can see below I have two div's one is by the id By Senate and the other is 2nd div. I have a button on first div called view details. My requirement is when i click the view details button I want it to do a carousel and go to the 2nd div. I want to use bootstrap carousel.
I have tried some ways but it did not work out. Can somebody please help me.
<div id="BySenate" style="display: none">
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Party</th><th>Name</th><th>Chamber</th><th>District</th><th>State</th></tr>
</thead>
<tbody>
<tr dir-paginate="senate in senate|orderBy:['fullname']|filter:search|itemsPerPage:10" pagination-id="bySenate">
<td> <img src="{{senate.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{senate.fullname}}</td>
<td > <img src="{{senate.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{senate.chamber_name}} </td>
<td>{{senate.district_name}}</td>
<td>{{senate.state_name}}</td>
<td> <button type="button" class="btn btn-primary" id="{{senate.bioguide}}" value="{{senate.bioguide}}" ng-click="getLegislatorDetails($event);">View Details</button></td>
</tr>
</tbody>
</table>
</div>
<div id="2nd div">
</div>
I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());
I have a table like this:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" style="width: 30%">Name</th>
<th class="hidden-480 center" style="width: 40%">URI</th>
<th class="hidden-phone center" style="width: 30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Admin_Agency
</td>
<td class="uri">
/admin/agency
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<td class="name">
System_Log
</td>
<td class="uri">
/admin/syslog
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
</tbody>
</table>
When click on Edit < a href="#modalEdit"> , I want to get the the data from the 2 sibling td , that is the < td class="name"> , < td class="uri"> .
I add an onclick event on < a href="#modalEdit"> to parse data to the model when fire event click :
var name = $(this).parent().siblings(".name").html()
var uri = $(this).parent().siblings(".uri").html()
The code does not run.
Is there any suggestion for me?
THanks
you have to use closest() to get its parent tr and then use find() to get td with via class selector, and the use text() to get the text between the opening and closing tag of td.
Like this:
var name = $(this).closest("tr").find(".name").text();
var uri = $(this).closest("tr").find(".uri").text();
FIDDLE EXAMPLE