I really appreciate your help. All of the mistakes which you figured out is
just a typo. I've it working but quite slow thats the reason I thought of
enhancing it.
Michael Geary wrote:
>
>
> 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.
>
>
>
--
View this message in context:
http://www.nabble.com/hide-table-rows-when-we-type-in-text-box-tf4294139s15494.html#a12228175
Sent from the JQuery mailing list archive at Nabble.com.
