Develop Reference

table is breaking when doing item searching using jquery

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

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

JQuery: .remove() does not work properly

Here is my html and codes :
<div id="rptCategoryProducts">
<ul class="productsUl">
</ul>
</div>
removing scritp :
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
this.remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
adding script:
$(".productsUl").append("<li>" + productInnerHtml + "</li>");
But it doesn't remove and also when I watch the steps in Mozilla Firebug I saw it stops after this.remove(); line.
Do you have suggestion?

or even simpler:
$(".productsUl li").remove();
;-)

You need to use $(this) to refer to the li element
$("#btnFilter").click(function () {
$(".productsUl li").each(function () {
$(this).remove();
});
currentPage = 0;
InfiniteScroll(0, 1000);
});
http://jsfiddle.net/Gwbmw/

When you loop through a jQuery object using each, you get the elements themselves, not each element wrapped in a jQuery object. You need to wrap each element in a jQuery object to use the remove method:
$(".productsUl li").each(function () {
$(this).remove();
});
However, you don't even need to loop through the elements, just use the remove method on the jQuery object containing all the elements:
$(".productsUl li").remove();

You need $(this) instead of this -
$(".productsUl li").each(function () {
$(this).remove();
});

You shoud try this:
$(this).remove();
instead of
this.remove();

Missing '$'. Try:
$(".productsUl li").each(function () {
$(this).remove();
});

In each callback, this points to the dom element reference not to the jquery object reference. So you need to get the jquery object reference of the item before calling remove()
$(".productsUl li").each(function () {
$(this).remove();
});
It can be done much easily
$(".productsUl > li").remove()

Strange. It works for me. look at this test:
[link]http://jsfiddle.net/bwqwD/

If li has less than 3 characters, hide?

I want to be able to hide list items that have less than 3 characters, how do I do this? What is wrong with my code below?
I am a JavaScript/jQuery newbie.
jQuery().ready(function () {
if (jQuery('ol li').length < 3) {
jQuery(this).hide();
};
});

Your code is saying
if (jQuery('ol li').length < 3) { //If I have less than 3 li elements
jQuery(this).hide(); //hide the window object
};
What you want to use is filter
$('ol li').filter( function(){ return $(this).text().length<3; } ).hide();
EDIT - Based on your comment in my post: If it is a span tag that could have other data around it:
$('ol li span').filter( function(){ return $(this).text().length<3; } ).parent().hide()
Fiddle running the span example

You'll need to filter out the elements that have a content of less than 3 characters, and hide those :
$(function() {
$('ol li').filter(function() {
return $(this).text().length < 3 ;
}).hide();
});

$('ul li').each(function() {
if ($(this).text().length < 3)
$(this).hide();
});
Demo

Try this:
$('ol li').filter(function(){ return $(this).text().length < 3; }).hide();
Another alternative could be this:
(Because you are evaluating elements not value characters in your question code snippet)
if($('ol li').length < 3){ $(this).hide(); };

I think you need to get the .html() of your DOM element and then do .length on that.

jquery - limiting toggleClass to 2 elements

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.

here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})

The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>

Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>