I am trying to to select a table row using JQuery, but it seems not to fire the .selected event. I have put the code on JSFiddle
http://jsfiddle.net/tonymaloney1971/3tevxmps/1/
I would like a table row selected when the mouse is clicked and change row colour and display an alert message with the selected row information.
I have tried the following but it doesn't work:
$("td").click(function () {
$('.selected').removeClass('selected');
$(this).addClass("selected");
});
Any ideas?
Thanks
try this: fiddle demo
you can add class each td like: "p" for product, "i" for inf Rate, "n" for note, and get in click event.
js changes:
$("tbody tr").click(function () {
$('.selected').removeClass('selected');
$(this).addClass("selected");
var product = $('.p',this).html();
var infRate =$('.i',this).html();
var note =$('.n',this).html();
alert(product +','+ infRate+','+ note);
});
css changes:
table.formatHTML5 tr.selected {
background-color: #e92929 !important;
color:#fff;
vertical-align: middle;
padding: 1.5em;
}
You have to put the event on the table row (tr) and then change color of each table cell (td)
$("tr").click(function () {
$('.selected').removeClass('selected');
$(this).find("td").addClass("selected");
});
You tr is inside tbody so you have to use something like this
$("#myTable tbody tr").live('click', function (event)
{
//adding class
//removing class
});
Note: live may not support in latest version of jquery . use ON accordingly
Working fiddle : http://jsfiddle.net/supercool/550nq015/
I checked your code.. Here is my solution.
First, the clickable element is a td element. So in JQuery function you need to ask the parent of this element. To do that you can do with this code.
$("td").click(function () {
$('.selected').removeClass('selected');
$(this).parents('tr').addClass('selected');
});
It will add a class to your parent tr element from td that you click. I noticed the css you provide is only work with td element. So I write new rule for selected row element.
table.formatHTML5 tr.selected{
background-color: #e92929 !important;
vertical-align: middle !important;
height: 4em;
}
otherwise, you can also add onClick html event for each tr elements displayed in the table.
Hope this answer helps you
the Shortest way:
CSS:
<style type="text/css">
tr.selected {
background-color: #e92929 !important;
color: #fff;
vertical-align: middle;
padding: 1.5em;
}
</style>
Jquery:
$(".table > tbody > tr").click(function (e) {
$(this).addClass("selected").siblings().removeClass("selected");
});
Related
Fiddle here: http://jsfiddle.net/yv1vLhd9/
For whatever reasons, suppose I want to replace three dom elements with three others using JQuery, but I want to transfer one or more data attributes from the first elements onto their corresponding replacements.
Given the following HTML:
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>
And the following CSS:
div {
width: 100px;
height: 100px;
}
div:before {
content: attr(data-custom);
}
.original {
border: blue solid 1px;
}
.new {
border: pink solid 1px;
}
How can I make sure there is a new element with each of the custom data attributes?
For example:
$(document).ready( function(){
var $originalEl = $('.original')
var originalData = $originalEl.data('custom')
var replacement = '<div class="new" data-custom="' + originalData + '"></div>'
$originalEl.after(replacement).hide()
});
But this creates three new data-custom="dog" attributes.
You must use $.each for the element.
Starting after you declare $originalEl
$originalEl.each(function(){
// code here
})
Here is your code updated http://jsfiddle.net/yv1vLhd9/4/
http://jsfiddle.net/VixedS/wz95hh3r/1/
$(document).ready(function(){
$('.original').each(function(){
$(this).hide().clone().attr('class','new').show().appendTo('body');
})
});
jQuery provides a host of DOM manipulation methods that will help you achieve the desired input. As noted by some of the other answers, you'll need to traverse over the set of matched elements using $.each. In addition, rather than creating new elements from strings, you can use the .clone() method to:
clone the existing element
modify your new element
insert it after the original element
traverse to the original element
and finally hide the original element.
$(function () {
$('.original').each(function (idx, elem) {
$(elem)
.clone()
.removeClass('original')
.addClass('new')
.insertAfter($(elem))
.prev()
.hide();
});
});
div {
width: 100px;
height: 100px;
}
div:before {
content: attr(data-custom);
}
.original {
border: blue solid 1px;
}
.new {
border: pink solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='original' data-custom="dog"></div>
<div class='original' data-custom="cat"></div>
<div class='original' data-custom="sheep"></div>
API Method References:
jQuery.each()
.clone()
.removeClass()
.addClass()
.insertAfter()
.prev()
.hide()
I have a table with 3 columns. I would like to convert to single row.
both append.('</tr><tr>') and after.('</tr><tr>') do not work.
Want it like this for mobile friendly page -
Thank you for your help!
http://jsfiddle.net/tZt3Q/
One way you can achieve this is by using JQuery wrap method. See Wrap and UnWrap
Demo
Demo W/O class
$(document).ready(function () {
var tbl = $("table");
$('td','table').unwrap().each(
function () {
tbl.append($(this).wrap('<tr>').parent());
});
});
Much simpler one:
$(document).ready(function () {
$('table').find('td').unwrap().wrap($('<tr/>'));
});
Fiddle
Try this:
Single Row:
var $tds = $("table td").clone();
$("table").empty().append($("<tr>").append($tds));
http://jsfiddle.net/hescano/tZt3Q/10/
Single Column:
var $tds = $("table td").clone();
$("table").empty();
$tds.each(function(){
$("table").append($("<tr>").append($(this)));
});
http://jsfiddle.net/hescano/tZt3Q/11/
Just as a suggestion .. you could use divs as cells instead of a table and it will happen without any JS using float css:
like this :
http://jsfiddle.net/tZt3Q/9/
HTML:
<div class="tableDivColumns">
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div>
<div>Seven</div><div>Eight</div><div>Nine</div>
</div>
<div class="tableDivRows">
<div>One</div><div>Tow</div><div>Three</div><div>Four</div><div>Five</div><div>six</div>
<div>Seven</div><div>Eight</div><div>Nine</div>
</div>
CSS:
.tableDivColumns {border:1px solid green; padding 5px; width:160px;height:160px;}
.tableDivColumns div {border:1px solid blue; width:50px; height:50px;float:left;}
.tableDivRows {border:1px solid green; padding 5px; width:60px;height:470px;}
.tableDivRows div {border:1px solid blue; width:50px; height:50px;float:left;}
I am adding two classes using javascript on my table, the css for the classes is:
//using less
.fade-table {
background-color: #fff;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.selected {
opacity: 1;
}
what i am trying to achieve here is that, my table fades at the opacity: 0.5 and the selected cell is applied with the selected class which highlights the selected cell.
The javascript being used is:
$("#pending_states table tr").live("click",function(){
$("#pending_states table").css({width: "140px"});
$("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").addClass("fade-table");
$("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").css({width: "140px"});
$("#pending_states").animate({ marginLeft: "4px"}, 200);
$(this).addClass("selected");
});
However for some reason after adding the fade-table class the script doesn't apply the selected class to the td. The obvious reason that i can think of is that this doesn't represent the td so o also tried $(this).closest("td").addClass("selected");. However this doesn't seem to work either.
Any suggestions on how this might work?
If you want to apply "selected" to the <td> that was clicked on, try:
$("#pending_states table tr").live("click",function(e){
$("#pending_states table").css({width: "140px"});
$("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").addClass("fade-table");
$("#pending_states td:nth-child(1), #pending_states th:nth-child(1)").css({width: "140px"});
$("#pending_states").animate({ marginLeft: "4px"}, 200);
($(e.target).is('td') ? $(e.target) : $(e.target).closest('td')).addClass("selected");
});
(or something less ugly). The idea is to use the event parameter to find the actual target of the click.
You are setting opacity on the wrong element. fade-table is applied to the cell, but selected is applied to the row, so the cell will still be set at 50% opacity.
http://jsfiddle.net/UNgbh/2/
I have a CSS border property in place currently (border-left: 1px), and onClick, I have it removed via the first jQuery function below.
How can I set this up so that my second function will add back the property upon the second click? It should switch back and forth per click.
$(function(){
$('#button').click(function() {
$('#button-2').css('border-left','none');
});
$('#button').click(function() {
$('#button-2').css('border-left','1px');
});
});
I have now included the original code: www.jsfiddle.net/tonynggg/frnYf/12
Would it be easier to define a css class:
.button { border-left: 1px; }
.buttonClicked { border-left: none; }
And then use the jQuery toggleClass
So your code would be:
$(function(){
$('#button').click(function() {
$('#button-2').toggleClass('buttonClicked');
});
});
That would then toggle your alternate css class on an off when it's clicked. If nothing else, this should get you pointed in the right direction.
First, create a class that has the border:
.borderclass
{
border-left:1px black solid;
}
And then,
$(function(){
$('#button').click(function() {
if ($('#button-2').hasClass('borderclass'))
$('#button-2').removeClass('borderclass');
else
$('#button-2').addClass('borderclass');
});
});
<table id="tab">
<tr><td class="here">dgd</td><td class="here">dfg</td></tr>
<tr><td class="here">fgf</td><td class="here">sg4</td></tr>
</table>
<table id="new">
<tr><td id="al">sss</td></tr>
</table>
#tab td {
padding: 5px;
border: solid 1px red;
}
#new td {
padding: 5px;
height: 40px;
border: solid 1px green;
background-color: green;
}
#new {
display: none;
}
$(".here").click(function(){
$("#new").show();
})
$("#al").click(function(){
alert('ok');
})
LIVE: http://jsfiddle.net/HTHnK/
How can i modify this example for add position in jQuery? I would like - if i click on .here then table id = new should show me on this clicked TD. Additionally if i clicked outside table id = new then this should hide.
How can i make it?
You want to be like this?
http://jsfiddle.net/HTHnK/6/
You want an event handler on the whole page, which will respond to clicks on it, but not on clicks within certain areas.
Use event.stopPropogation() to prevent the page from responding to certain areas:
$('.item').click(function(event){
$('#context').show();
event.stopPropogation();
});
$('body').click(function(){
$('#context').hide();
});
jsfiddle
If you're saying that the green box should be moved to the same position as the clicked cell (via absolute positioning, as compared to appending it as a child of the clicked cell) then you could try something like this:
$(document).on("click", function(e) {
var $el = $(e.target);
if ($el.hasClass("here")) {
$("#new").css({'left': e.target.offsetLeft,
'top': e.target.offsetTop}).show();
} else {
$("#new").hide();
}
});
Which processes clicks on the document. If the click is in one of the ".here" cells it moves the green box, otherwise it hides it.
Demo: http://jsfiddle.net/HTHnK/16/
Are you looking to move text from the source cell to the new table cell?
http://jsfiddle.net/dnrar/