table is breaking when doing item searching using jquery - javascript

i've wrote a jquery for searching datas within a table, the code is working but the table is altered. how to keep the entire row where ever the search key is matching
can anyone please tell me some solution for this
this is my jquery code
$('#resultSearch').bind('keyup', function() {
var s = new RegExp(this.value);
$('#ricGridTable td').each(function() {
if(s.test(this.innerHTML)) $(this).show();
else $(this).hide();
});
});

.hide() is breaking the table because it is setting the td to display:none;.
Instead use the visibility:hidden css attribute, and reveal again with visibility:visible.
This is done in jQuery using the .css() method $(this).css('visibility', 'hidden');
$('#resultSearch').bind('keyup', function() {
var s = new RegExp(this.value);
$('#ricGridTable td').each(function() {
if(s.test(this.innerHTML)) $(this).css('visibility', 'visible'); // Show
else $(this).css('visibility', 'hidden'); // Hide
});
});
However #HB Kautil has pointed out that you should be hiding the row tr and not the cell (td). In this case .hide() will do the job.
$(this).parents('tr').hide();

Try this,
$('#resultSearch').bind('keyup', function() {
var s = new RegExp(this.value);
$('#ricGridTable td').each(function() {
if(s.test(this.innerHTML)) $(this).parents('tr').show();
else $(this).parents('tr').hide();
});
});

Related

jQuery set cookie in column table show/hide

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
}
});

Add class to several elements

I have a cloned element and I want it so if I add a class to one of them it checks for active removes is and adds it to this and translates to the other. Here's what I'm working with:
$(document).ready(function() {
$("li").click(function(){
/*Here I want to add something like var active = $(.clonedelement + this, this)
but that does probably not makes sense, so what should i do? */
var active = $(this)
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
active.addClass("active");
}
});
});
Right now, it removes the current active from both, not does only add class to one.
I made a jsfiddle of it
http://jsfiddle.net/pintu31/8BxuE/
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
Header = $("#headerny", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
Header.addClass("floatingHeader");
} else {
Header.removeClass("floatingHeader");
};
});
}
// DOM Ready
$(function() {
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
If you just need to highlight the clicked element with the class of active, and remove all others then try this:
$("li").click(function(){
$("li").removeClass("active");
$(this).addClass("active");
});
You don't really need to check if either this, or others already have the class, simply steamroller to 'active' class off all the others and add it to the one that's been clicked
try this
demo updated 1
demo updated 2 //with clone(true)
demo updated 3 //with clone(false) - default
demo updated 4
$(document).ready(function() {
$(document).on('click', 'li', function(){
var ind = $(this).index();
$('li').removeClass('active');
$('li').eq(ind).addClass('active');
$('#header1').empty();
$('#header').find('ul').clone(true).appendTo( '#header1' );
});
});
$(document).ready(function() {
$("li").click(function(){
$("li").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
});

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

after() with fadein() jquery doesn't work

I am trying to append some extra rows to my table, but can't make it fancy with fadein().
As you can see mine is applying the fade in effect to the very first row.
Jsfiddle example
How can I apply the fadein to my other 3 rows??
I switched the places of the methods, but no success
$("input").click(function () {
$("table tr:last")
.hide()
.after("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>")
.fadeIn(1000);
});
Try this:
JSFiddle
$("input").click(function () {
var rows = $("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");
rows.css({
display: 'none'
});
$("table tr:last").append(rows);
rows.fadeIn(1000);
});
You can combine these two statements:
var rows = $("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");
rows.css({
display: 'none'
});
to
var rows = $("<tr class=\"display: none\"><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>");
$("input").click(function(){
$("<tr><td>SecondRow</td></tr><tr><td>ThirdRow</td></tr><tr><td>ForthRow</td></tr>")
.hide()
.insertAfter("table tr:last") // .appendTo("table tbody")
.fadeIn(1000);
});

Only select one row at a time using jquery

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.

Categories

Resources