Develop Reference

Change border of last row clicked in a dynamic table (using <ul>)

Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>

You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM

NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});

You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.

How to achieve toggle effect with jQuery in this situation?

Found one example that is exactly what I would like to have.
Please resize your window to 700px less and url is http://www.subway.com.au
thanks for reading this.
My layout is as the following:
<div id="left">
<div id="left-container" style="display:none;">Content foo
</div>
</div>
<div id="right">
<div id="right-container" style="display:none;">Content bar
</div>
</div>
<div class="overlay"></div>
Basically, when click either #left or #right, relatively the #left-container or #right-container will slideUp or slideDown, and at the same time .overlay will be showed or hidden. Of course, when containers are slideUp, clicking all screen rather than itself will slideDown and removeClass .overlay.
I know this question has been brought over a lot of times. However it seems still not working for me. Thanks for your time.

I would use a little different HTML for that -
<div id="left" class="header">
A
<div class="container">Content foo
</div>
</div>
<div id="right" class="header">
B
<div class="container">Content bar
</div>
</div>
<div class="overlay"></div>
and with the JS -
$(function(){
$(".header").on("click", function(){
if($(this).find(".container").is(":visible")){
$(".header").find(".container").each(function(){
$(this).slideDown();
});
$(this).find(".container").slideUp();
$(".overlay").show();
}else{
$(this).find(".container").slideDown();
$(".overlay").hide();
}
});
});
Here is the fiddle - http://jsfiddle.net/n8ykqLuy/1/
NOTE: At first I thought your requirement was custom. But I think what you are looking for is an accordion.

Replacement for toggle() multiple div sets

I've been working on this for a while and thought I'd like to get some expert advice.
I have 4 divs on a page labelled sun-sun3. When each of the divs is clicked a corresponding div (suninfo-suninfo3) will appear and when clicked again will disappear. While one of the info divs is open the others will always be closed.
Here is the html
<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>
The CSS is styled so that the sun divs use pulse which works fine and the suninfo divs appear in various locations around the page. All works perfectly.
The following Javascript also works fine, however it is using toggle() which I would like to replace. My code is also quite long.
$(document).ready(function(){
$(".sun").click(function(){
$(".suninfo").toggle();
$(".suninfo1,.suninfo2,.suninfo3").hide();
});
$(".sun1").click(function(){
$(".suninfo1").toggle();
$(".suninfo,.suninfo2,.suninfo3").hide();
});
$(".sun2").click(function(){
$(".suninfo2").toggle();
$(".suninfo,.suninfo1,.suninfo3").hide();
});
$(".sun3").click(function(){
$(".suninfo3").toggle();
$(".suninfo,.suninfo1,.suninfo2").hide();
});
});
As you can see, there isn't much to it and it does work, but I'd rather not use toggle()
Cheers

I would suggest leveraging jQueryUI for this -- as it provides this functionality out of the box.
http://jqueryui.com/accordion/
In addition it will not require you to modify your script if you decide to later add divs for sun4, sun5, and/or sun6, etc.

You can use start with jquery selector in this case but need to rename 'suninfo' class name because 'sun' and 'suninfo' class names starts with 'sun' word, so it will be difficult to use start with jquery selector. Also selector class name should be first while writing in div
like if we are using $("[class^='suninfo']") then suninfo should be first call in <div class="suninfo info">.
Please see below jquery
$(document).ready(function(){
$("[class^='sun']").click(function(){
var nextElement = $(this).next();
$(nextElement).toggle();
$("[class^='infoSun']").not($(nextElement)).hide();
});
here rename your suninfo class to infoSun and call it at first place like below
<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>
Please see this for more information on start with selector in JQuery

To make it more simple according to you structure:
$(".dot").each(function(){
$(this).click(function(){
$(this).next().toggle();
$(".info").not($(this.next())).hide();
})
})
Why don`t you like toggle?
To manually control it you can:
$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')
if using jQuery

Moving a div from inside one div to another div

How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>

document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);

I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().

Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.

Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI

replaceWith(); JQuery function

I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!

You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two

try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});