I want to show a table inside a td with an on click function. But it shows the tables in the complete column with the on click function .How to make it only show the table of the same td on which click function is performed?
$(document).ready(function() {
$("#checklistbox").hide();
$("#row_list").hide();
$("#checklist").click(function() {
$("#checklistbox").show();
});
$("input").click(function() {
$("#checklistbox").hide();
});
});
$(document).ready(function() {
$("#nameinitials").each(function() {
$(".table-responsive").hide();
});
});
$(document).ready(function() {
$(".val_resp").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").show();
});
});
$("input").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").hide();
});
});
});
Use DOM traversal functions relative to $(this)
$(".val_resp").click(function() {
$(this).closest("td").find(".table_responsive").show();
});
Related
Hello Guys i stuck at a problem where i want to show one block default on page load and another to show when hovered and hide the default one until the another blocks are being hovered. i wrote this code to add class and remove class but instead of removing classes when hovered on one block it shows every of them at same time the content in the middle is what I wanted to show,
Thanks.
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-1').addClass('active');
}, function() {
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-2').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-3').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-4').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-5').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have solved the issue thanks to #isherwood suggestion I have used this code
jQuery(document).ready(function() {
jQuery('.why-us-1').hover(function(){
jQuery('.why-us-1').addClass('active');
},function(){
jQuery('.why-us-2, .why-us-3, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-2').hover(function(){
jQuery('.why-us-2').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-3, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-3').hover(function(){
jQuery('.why-us-3').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-4').hover(function(){
jQuery('.why-us-4').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-3, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-5').hover(function(){
jQuery('.why-us-5').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-3, .why-us-4').removeClass('active');
});
});
How to set cookie in column table hide/show function? So if user click hide then it will remember the browser that it still hide by cookie function when we refresh the page.
Function hide
function hideCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).hide();
});
$('ul#hiddenCols').append('<li id="'+columnClass+'">Show '+columnClass+'</li>');
}
Function show
function showCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).show();
});
$('li#'+columnClass).remove();
}
Please help to advice.
using jquery cookie
set cookie show/hide when process function
function hideCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).hide();
});
$('ul#hiddenCols').append('<li id="'+columnClass+'">Show '+columnClass+'</li>');
$.cookie("remember_state","hide"); //add it
}
function showCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).show();
});
$('li#'+columnClass).remove();
$.cookie("remember_state","show"); //add it
}
Add function when document ready
$(document).ready(function(){
if($.cookie("remember_state")=="hide"){
//hide function
}else{
//show function
}
});
I have a table that is generated by a Kendo Scheduler.
I have to add a click function on each td on document load.
For now, I have tried this:
$(document).ready(function () {
$('td.k-nonwork-hour').click(function () {
alert("Hello");
});
});
For adding a onclick function. I have also tried with onclick
$(document).ready(function () {
$('td.k-nonwork-hour').onclick =function () {
alert("Hello");
};
});
But none of them works. Anyone knows a solution? :)
Better use delegated event instead of attaching event handler to each cell.
e.g.
scheduler.wrapper.on("click", "td.k-nonwork-hour", function() {
alert("Non working day!")
});
Here is live example.
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
var target = $(e.currentTarget);
if (target.hasClass("k-event")) {
var event = scheduler.occurrenceByUid(target.data("uid"));
scheduler.editEvent(event);
} else {
var slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});
hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});
Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()
Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden
If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/
DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});
I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?
You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.
Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help
While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/
$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i
You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.