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/
Related
I am currently testing CKEditor.
Especially the features of the table resize and table plugin.
What I found out so far is that it seems to work sometimes with pt and sometimes with px.
Is there a way I can change the behaviour to work always with percentage or some other kind of relative ratio instead of px or pt for column width?
<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
<thead>
<tr>
<th scope="col" style="width:386px">1</th>
<th scope="col" style="width:953px">
<p>2</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:386px">3</td>
<td style="width:953px">4</td>
</tr>
</tbody>
</table>
My original post was on http://ckeditor.com/forums/CKEditor/CKEditor-Table-Width-and-Column-Width-Units. I decided to post it here because there was no activity on my question for two days.
I am looking for an easy way to adapt the table plugin in CKEditor either by configuration or programmatically via JavaScript to change the units from px e.g. to percentage or any other relative unit.
Update
What I want is that the users sees in WYSIWYG a table is for example 100% width while editing. When the user changes the column witdth they get changed in percentage and not in pixels. Or the user makes the table smaller than 100 % total width. Then the table gets changed in % not px.
There does not appear to be a configuration setting to change this behavior, and editing the plugin itself is probably a bit of a headache.
You could simply give your table a percentage width and leave the rest as is. Most modern browsers will treat/resize the cells in proportion. You could force this with jquery, or even with a simple CSS declaration. For example: $("table").width("100%");, or table { width: 100% !important; }.
Alternatively, you can use jquery to grab the current widths and change them to percentages, so for example something similar to this:
var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
$(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});
$("table").width("100%");
var tableWidth = $("table").width();
$("table tr").children().each(function( index ) {
$(this).width(Math.round(100 * $(this).width() / tableWidth)+"%");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" style="width:1340px">
<thead>
<tr>
<th scope="col" style="width:386px">1</th>
<th scope="col" style="width:953px">
<p>2</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:386px">3</td>
<td style="width:953px">4</td>
</tr>
</tbody>
</table>
For some information on how you might add this using class names to specifically target CKEditor tables, see:
https://stackoverflow.com/a/7980775/2126792
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 have a simple table like
<table>
<thead>
<tr><th>A</th><th>B</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
</tbody>
</table>
I actually wanted the thead columns to behave like buttons for sorting table ascending or descending order-wise.
I found an option of using datatables plug-in which works like this.
But I am using jquery 2.1.1 and the above plug-in isn't available for this version.
I am bit confused of how to proceed further to make such implementation with my code.
Any help will be appreciated!
"Stupid jQuery Table Sort" seems to fully support jquery 2+.
JSbin demo: http://jsbin.com/wimefeseni/1/edit?html,output
JS:
$(function(){
$("table").stupidtable();
});
HTML:
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
</tbody>
Link to plugin: http://joequery.github.io/Stupid-Table-Plugin/
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.
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.