When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.
Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/
You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/
Related
I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
<tbody>
<tr ng-repeat="tcs in rows">
<td>{{tcs.trackName}}</td>
<td>
<table align="left">
<tbody>
<tr ng-repeat="category in tcs.category">
<td>{{category.categoryName}}</td>
<td>
<table> //this one should be on the 3rd <td> of parent table
<tbody>
<tr ng-repeat="skill in category.skill">
<td>{{skill.skillName}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.
Found an answer, not quite good since it keeps repeating the tbody but its still ok
<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
<tbody ng-repeat="tcs in rows">
<tr ng-repeat="category in tcs.category">
<td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
<td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
<td>
<ul class="list-unstyled" >
<li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
</ul>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
<a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
<a ui-sref="deleteMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>
I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.
How would I achieve that?
Here is the HTML markup I currently have:
<table class="table">
<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div>
</td>
</tr>
</tbody>
</table>
and the CSS:
.hiddentablerow{
padding: 0px 0px !important;
background-color: #DDD;
}
And of course a fiddle: http://jsfiddle.net/kxtk6w4y/
You can use jQuery to fire an onClick for the row clicked that toggles the hidden row.
Fiddle
And here's the snippet I created for it:
$('.accordion-toggle').click(function() {
if ( $(this).attr('aria-expanded') == "true" ) {
$(this).children().css('background-color', '#FFF');
} else {
$(this).children().css('background-color', '#DDD');
}
});
How can I edit specific div's using Angular? I have a upset of div's at my page, containing tablerows with data. When I click on a edit-button on a specific div, I want that to bed editable.
How can I bind the click event to that particular div? I have done something like this now:
<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
<h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
<table class="table table-condensed pad1">
<tbody>
<tr>
<td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
</tr>
<tr>
<td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
</tr>
<tr>
<td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
</tr>
<tr>
<td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
</tr>
<tr>
<td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
</tr>
<tr>
<td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
</tr>
</tbody>
</table>
</div>
As you can see, I have ng-click, but I don't know how to bind the div to the click event. ANyone?
please see here jsbin.com/zataro/2/edit?html,output
<tr>
<td><strong>Läghenhetsnr</strong>
</td>
<td>
<span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
<input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
</td>
<td>
<button ng-click="edit.apartment=!edit.apartment">
<span ng-show="!edit.apartment">Edit</span>
<span ng-show="edit.apartment">Save</span>
</button>
</tr>
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});