I am trying to figure out how I can highlight a column using ng-table directive for Angular. Though my understanding on this directive is that in the current setup it is not capable of achieving what I am looking to do, so I will have to modify it myself.
I'd like to know if anyone has had any success with getting table column highlighting working with angular sorting and ng-repeat, it doesn't necessarily have to be done with ng-table, but any example would be greatly appreciated.
In your table definition, add table-hover class, for example:
< table ng-table="myTable" class="table table-hover table-striped table-condensed table-bordered" >
Customize color in app.css
.table-hover > tbody > tr:hover {
background-color: #dadada;
}
Give your table a custom class:
<table ng-table="usersTable" class="table my-custom-table-class">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">{{user.name}}</td>
</tr>
</table>
Then, in the CSS add the following:
.my-custom-table-class tbody tr:hover {
background-color: #dddddd;
}
the #dddddd is the color of the highlight.
Related
I'm trying to adopt Semantic-UI and I'm having some trouble. I'd like to get row selection to work in a table.
I'm using their sample HTML below:
<table class="ui selectable celled table">
https://jsfiddle.net/yjuoqdcy/
You can see that hovering over the rows does nothing. I'm guessing I'm missing some sort of behavior or event hook up but I cannot find much in the documentation.
Thanks for your helps.
It appears that you are using an old version (1.11.8) of the Semantic UI framework. Upgrading to the the latest version will allow you to use row selection without the need of custom CSS.
selectable table was introduced in version 2.0.0. - Release notes
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<table class="ui selectable celled table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No Action</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
</tr>
</tbody>
</table>
Do you mean you want the background of the cell to change colour when you mouse over it?
If so all you need is something like this.
table tr:hover {
background: #CCCCFF;
}
https://jsfiddle.net/link2twenty/cae2k9fy/
You can add custom style to the rows using tr:hover. Do styling as necessary with
tr:hover {
background-color: #f5f5f5;
}
https://jsfiddle.net/Pugazh/yjuoqdcy/3/
In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");
I am using ng-clip which utilizes ZeroClipboard library. But I am having this hover state issue with the button to copy.
On table row hover it does go back to full opacity. But when I go to click button it suddenly removes the hover state and hover state doesn't stay active.
Here is my jsfiddle http://jsfiddle.net/meetgodhani/yu1t5g2v/. And following is my code.
CSS
.sample-button
{
opacity:0.3;
}
.table-hover>tbody>tr:hover>td .sample-button {
opacity:1;
}
JavaScript
angular.module('clip', ['ngClipboard']);
function Main($scope) {
$scope.copytext = "Copy me !";
}
HTML
<h1> ngClip Example </h1>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Button</td>
</tr>
</tbody>
</table>
Any idea how to fix it ?
Help would really be appreciated.
Here is your solution I think
http://jsfiddle.net/yu1t5g2v/7/
onDomready
I changed the menu options of JSFiddle.
I hope it can help. It must be like "document ready" in jQuery.
I have a table which is populated by some JS on opening and as part of that, section headings are given a column span across the whole table as well as a classname of "section". I verified this by an alert in the onmouseover hook for the tr elements which echoed the classname. The classname definitely takes.
I have some CSS like this...
tr:hover {
background-color: #FF9966
}
thead tr:hover, tr.section:hover {background-color: #DACFE5;!important}
The roll-over works fine and excludes the thead children, but I cant get it to exclude "section" class tr's.
What syntax do I need in the CSS to achieve this?
The table template is...
<table id="myTable" border="1" class="indent">
<thead>
<tr>
<th colspan="3">Joe's Cafe Menu</th>
</tr>
<tr>
<th>Select</th>
<th>Item</th>
<th>Price</th>
<tr>
</thead>
<tbody>
</tbody>
</table>
EDIT:
Problem was case sensitivity.
A rookie error I guess.
classname was being echoed in the alert but the member referenced by the CSS is className. I fixed that and now its fine.
This CSS works like a charm...
tbody tr:not(.section):hover {
background-color: #FF9966
}
For reasons I don't understand, this CSS fails to exclude the header...
tr:not(.section):hover {
background-color: #FF9966
}
thead tr:hover td {background-color: #DACFE5;}
Which is academic really since its a bit of a hack.
tr:not(.section):hover {
background-color: #FF9966
}
Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.
Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?
My table structure is pretty simple.
<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
what you are searching for is a attribute for the tag and it is called rules:
http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html
<table rules="cols">
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.
EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).
EXAMPLE: http://jsbin.com/ixire
Using the cell border is one option you can use but there's another:
I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:
<style type="text/css">
table {
border:1px solid #ccc;
border-collapse:collapse;
}
.col {
border-right:10px solid blue;
}
</style>
<div id="tDiv">
<table border="1">
<colgroup class="col">
<col width="200" />
</colgroup>
<colgroup class="col">
<col width="200" />
</colgroup>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one one</td>
<td>one two</td>
</tr>
</tbody>
</table>
</div>
I did not get a change to test in IE (any versions of it) though.
Generally done with border on the right (or left) of each cell.
This -> http://jsfiddle.net/XFtBR/ should give you a start point.