I have the following html code:
<table id="MatrixTable">
<tr>
<td id="321"> 0 </td>
</tr>
</table
A. How can I replace the '0' text with an hyperlink when mouseover with jQuery like the following:
<table id="MatrixTable">
<tr>
<td id="321">
<a class="modal-dialog-link" href="Edit?matrixID=321" updatefunction="UpdateMatrix">
0
</a>
</td>
</tr>
</table>
$("table#MatrixTable td").mouseover(function () {
// doing something here...
});
B. How can I come back to the original '0' when mouseleave with jQuery like the following:
$("table#MatrixTable td").mouseleave(function () {
// doing something here...
});
Thanks.
Use jQuery.hover
$("table#MatrixTable #321").hover(function () {
$(this).html('<a class="modal-dialog-link" href="Edit?matrixID=321"'+
'updatefunction="UpdateMatrix">0</a>');
},function(){
$(this).text('0');
});
You can use hover to bind an event handler to the mouseenter and mouseleave events, and you can use wrap and unwrap to wrap the contents in an a element:
$("#321").hover(function() {
$(this).contents().wrap("<a>");
}, function() {
$(this).find("a").contents().unwrap();
});
Here's a working example. Inspect the DOM to see the changes as you hover over the element.
This seems like a very strange way to use a link though... why can't the link always be in the DOM?
Related
I am building a schedule view, which is currently in a preliminary stage, where I add events and then I can rearrange them, either by dragging the event vertically upwards or downwards, or by resizing it vertically. For resizing, I'll click a button contained within the event and drag it up or down to resize the event. For a better view, please have a look at this opensource calendar.
I am currently facing an issue, in making my elements draggable. None of the drag events fire, although other (click, mouseover) do work. The following are snippets from what I've done till now. Please excuse me for my work, I'm still a little rusty at Angular.
*.component.html:
<table>
<tbody *ngFor="let item of FullHours; let i = index" >
<tr [ngSwitch]="returnItem(Doc)" [ngStyle]="{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
<td [style.height.px]="unitHeight" >
<div ondrop="drop($event)" ondragover="allowDrop($event)" *ngIf="hasEvent(i)" class="event-container" style="background-color: white;">
<div class="event" draggable="true" ondragstart="drag($event)">
<div style="width:100%; float:left" class="content">04:30PM -- 05:30PM</div>
<div style="width:100%; float:left" class="content">event {{i}}</div>
<button draggable="true" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" class="eventbtn" style="position: absolute; left:0; right:0; bottom:0" >
=
</button>
</div>
</div>
<div *ngIf="!hasEvent(i)" (click)="createEvent(i)" class="event-container"></div>
</td>
</tr>
</tbody>
</table>
*.component.ts:
onDrop(event: any) {
alert('on-drop');
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
//try to change height
}
onDragOver(evt) {
alert('on-drag-over');
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
alert('on-drag-leave');
evt.preventDefault();
evt.stopPropagation();
}
I've put in alerts on all binded functions, but none of them work. I did try this earlier with the whole event too but it still didn't work. I've created simple drag and drop divs wit JavaScript code but even those don't work in here. Do let me know if I need to provide anything else.
I'd be grateful for any guidance that can make my drag and drops work. Thanks in advance.
Here's what I was able to get working with help from someone on here. However, I'd like to add it to include the -/+ when expanding/collapsing the rows.
Collapsing table with html
Code: http://jsfiddle.net/5BRsy/3/
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table2">
<th></th><th>server 1</th><th>server 2</th>
<tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
<tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
<tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
<tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
<tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>
CSS
.expand1 { display: none;
}
.expand2 { display: none;
}
JS
$(document).ready(function(){
$(".btn").click(function(){
$(".expand1").toggle();
});
$(".btn2").click(function(){
$(".expand2").toggle();
});
})
I updated your fiddle: http://jsfiddle.net/5BRsy/7/
Basically, you are adding some kind of html that you will use to represent your toggle. In your case I used <span>+</span>.
<tr><td class="btn"><span>+</span> used</td><td>1gb</td><td>2gb</td></tr>
Then, when you click the <span> (or the + sign I should say) you toggle the display of your content, as you were already doing, and then change your + to a -. Clicking it again toggles it back to the way things were.
$(document).ready(function(){
$(".btn span").click(function(){
if($(".btn span").html() == "+") {
$(".btn span").html("-");
} else {
$(".btn span").html("+");
}
$(".expand1").toggle();
});
To render the + and - you can try using :before pseudo-element, however it's just a trifle problem, the problem is your code, it's too messy indeed, I modified it much to make it more perfect. Fistly you don't need the classes expand1 and expand2 assigned to each td that way. You can take benefit of jQuery selectors to hide the rows initially and toggle the rows on click. Here is the modified code:
HTML:
<table>
<th></th><th>server 1</th><th>server 2</th>
<tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
<tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td class="btn">available</td><td>1gb</td><td>2gb</td></tr>
<tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
<tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>
CSS:
.btn:before {
content:'+ ';
vertical-align:middle;
}
.btn.expanded:before {
content:'- ';
vertical-align:top;
}
JS:
//hide the rows initially
$('.btn').closest('tr').nextUntil('tr:has(td.btn)')
.not(':last-child').toggle();
//register click handler on ready
$(document).ready(function(){
$(".btn").click(function(){
$(this).closest('tr').nextUntil('tr:has(td.btn)')
.not(':last-child').toggle();
$(this).toggleClass('expanded');
});
});
Demo.
You can see that the code is much more concise and cleaner. Here is some related references:
.closest()
:has()
.nextUntil()
I'm having a couple of issue with Jquery. Basically I have a .html() response printed and I have to highlight rows of a table on mouseover but it doesn't work.
HTML table
<table id='simplehighlight'>
<tr>
<td>header 1</td>
<td>header 2</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>highlight this row</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>or highlight this row</td>
</tr>
</table>
the table above is printed with PHP echos. The PHP script is called with ajax and the response is printed inside a div with the .html() function. Example:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
}
}, 'text/html');
}
data is the HTML table. Last but not least I have the jquery code for active the highlight which it doesn't work.
$("simplehighlight tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
instead of highlighting the row I have put a simple alert to check if it works, but obviusly it does not. Why? What's wrong in my code? How can I accomplish my task, aka highlight these rows?
Thanks everyone,
Alberto-
Attaching an event handler via jQuery's on should work:
$('body').on('mouseenter mouseleave', '#simplehighlight tr:not(:first-child)', function() {
$( this ).toggleClass( 'highlighted' );
} );
See this jsFiddle.
The good thing with using on this way is, that the table you mentioned may be added at any time (e.g. through an AJAX call). When calling on directly on the jQuery match (as in jQuery("#simplehighlight tr").not(':first').on(...)), jQuery binds the handler only to the currently existing DOM elements.
Note: I replaced the hover event with mouseenter mouseleave, because hover is removed since jQuery 1.9:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a
shorthand for the string "mouseenter mouseleave".
Source: http://api.jquery.com/on/
You have to remember that commands such as the one your are trying to execute, will only be executed against elements that already exist in your DOM. So basically you have to combine the two segments of your code like this:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
$("simplehighlight tr").not(':first').hover(
// do highlight stuffs here
alert("IT WORKS??");
});
}
}, 'text/html');
}
Instead of firing the hover() function manually, you should set up an event handler to do so. Events will also get captured from inserted elements; so you may set up the event listener even before the AJAX call.
jQuery( 'simplehighlight tr' ).not(':first').on( 'hover', function() {
var currentTR = jQuery( this );
currentTR.addClass( 'highlight' );
} );
try
jQuery("#simplehighlight tr").not(':first').mouseover(function(){
// do highlight stuffs here
alert("IT WORKS??");
});
here a js fiddle
here
i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td>text</td><td>text</td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
I made myself a custom jquery function:
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
(I know OP want CSS and HTML only, but consider jQuery)
Edit
Agreed with Matt Kantor using data attr. Edited answer above
If you're on a browser that supports it you can use CSS to transform the <a> into a table row:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
If you have to use a table, you can put a link into each table cell:
<table>
<tbody>
<tr>
<td>John Smith</td>
<td>123 Fake St</td>
<td>90210</td>
</tr>
<tr>
<td>Peter Nguyen</td>
<td>456 Elm Ave</td>
<td>90210</td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div> method:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
The usual way is to assign some JavaScript to the onClick attribute of the TR element.
If you can't use JavaScript, then you must use a trick:
Add the same link to each TD of the same row (the link must be the outermost element in the cell).
Turn links into block elements: a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.
This is my solution:
jQuery You can add this for example to a standard included javascript file
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Now you can use this on any <tr> element inside your HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
When i want simulate a <tr> with a link but respecting the html standards, I do this.
HTML:
<table>
<tr class="trLink">
<td>
Something
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
Hope can help someone.
Fiddle HERE
This saves you having to duplicate the link in the tr - just fish it out of the first a.
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.
Unless you have a single cell with an anchor tag that fills the entire cell.
And then, you shouldn't be using a table anyhow.
After reading this thread and some others I came up with the following solution in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">.
And make sure the script above is executed after the tr element is created (by its placement or using event handlers).
The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.
You can style specifically the link TRs with "tr[href]" CSS selector.
I have another way. Especially if you need to post data using jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.
I would really like a way of posting straight to a window location, but I do not think it is possible.
Thanks for this. You can change the hover icon by assigning a CSS class to the row like:
<tr class="pointer" onclick="document.location = 'links.html';">
and the CSS looks like:
<style>
.pointer { cursor: pointer; }
</style>
This method is here to give you a choice. Old css trick: filling the parent with position absolute.
<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>
inset:0 is a shorthand for top:0;right:0;bottom:0;left:0
we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.
Can you add an A tag to the row?
<tr><td>
</td></tr>
Is this what you're asking?