It would be helpful to have a complete example of your actual HTML and
JavaScript code. The code you listed in your message is not working code:
1) The selector $("#example tbody tr td.name") will not select anything,
because your <td>'s have no class attribute.
2) $(this).html().indexOf("val") shouldn't have the quotes around val.
3) Calling .show() and .hide() on the TD doesn't work in all browsers. I had
better luck using them on the TR.
It's fairly easy to make this code 20 times faster by writing straight DOM
code, but the code is more dependent on on the actual DOM structure.
Just for fun, I posted an example with about 1250 rows in the table:
http://mg.to/test/potluri/rower.html
Type some text into the Slow box and the Fast box to compare the timings.
The JavaScript code is in:
http://mg.to/test/potluri/rower.js
The slow() function in rower.js is basically the code you posted. The fast()
function is the improved version:
function fast() {
var rows = [];
var tbody = $('#example2 tbody')[0], trows = tbody.rows;
for( var i = 0, n = trows.length; i < n; ++i ) {
var row = trows[i];
var col = row.firstChild;
rows.push({ row:row, col:col, style:row.style, visible:true });
}
var nRows = rows.length;
var $text = $('#textId2'), text = $text[0];
$text.keyup( function() {
var time = (new Date).getTime();
var val = text.value;
for( var i = 0; i < nRows; ++i ) {
var row = rows[i], col = row.col;
if( row.col.innerHTML.indexOf(val) != -1 ) {
if( ! row.visible ) {
row.visible = true;
row.style.display = '';
}
}
else {
if( row.visible ) {
row.visible = false;
row.style.display = 'none';
}
}
}
$('#time2').html(
( ( (new Date).getTime() - time ) / 1000 ) + ' seconds' );
});
}
As you can see, there is no jQuery code in the inner loop in the keyup
function. Some of the tricks that make it go fast:
1) Prebuilding the rows table with references to each row, column, style
attribute, and a visible boolean. (This takes a little extra time at startup
but pays for itself on each keystroke.)
2) Plain "for" loops instead of .each().
3) Saving references to jQuery objects instead of repeated $(...) calls.
4) Testing the row.visible boolean instead of hitting the DOM to test the
display attribute.
The code assumes that the TD containing the name is the first TD in each
row. If that's incorrect, you'd need to change the "var col =
row.firstChild;" statement.
-Mike
> From: Potluri
>
> Hi everyone,
> Thanks for everyone who responded for my previous queries.
> Here is an assignment which I feel challenging for our for
> our jquery guys.
> for table with 500 rows. I don't want to use any plugin for this.
>
> Well the task is when we type some thing in a text box it has
> to show only
> those rows which has the value typed in textbox
> in one coloumn.
>
> For ex.
> consider a table with id "example"
> <table id="example">
> <tbody>
> <tr><td> blah vijay</td></tr>
> <tr><td> blah victor</td></tr>
> <tr><td> blah avinash</td></tr>
> <tr><td> blah steven/td></tr>
> <tr><td> blah russell</td></tr>
> <tr><td> blah suresh</td></tr>
>
> </tbody>
> </table>
>
> So, when I type in "vi" in text box only rows that has
> vijay,victor,avinash
> should be shown, remaining should be hidden since all of them
> has Vi in
> their names.
>
> I did it in this way,
> let id of text box be textId
> $("#textId").keyup(function(){
> var val=$("#textId").val(); // which gives value typed in textbox
> $("#example tbody tr td.name").each(
> function()
> {
> if( $(this).html().indexOf("val") == -1)
> {
> $(this).hide();
> }
> else $(this).show();
> });
> });
>
>
> This works fine but it's taking 2 secs to do for table with
> 500 rows. Is
> there any better way to do this.
