I really appreciate your help. Thanks a lot. It seems that you are pro in
javascript. But my scenario in selecting col values from table is quite
different from yours, I think you can help me right away.
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 });
}
My row column contains lot of details apart from name like images span id's
apart from just text as in your scenario. in precise it contains lot of
details apart from simple text but I need to pick up only that text from
column by which rows are to be hidden.
This is example to give you idea of how my row looks.
: <table id="srtable">
<tbody>
<tr>
<td><image src="blah">some other textvijay<</td>
<td>some other column</td></tr>
<tr>
<td><image src="blah">some other textvictor<</td>
<td>some other column</td></tr>
</tbody>
</table>
So I need to get a innerHtml inside the column with class name "txtVal".
What I feel is we need to change the
var col = row.firstChild; to some thing else. I tried this var col =
row.txtVal; and then when I tried to access the innerHtml like
row.col.innerHTML.indexOf(val) it threw me javascript error.
Can you help me out in how to access this html.
Thanks in advance.
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#a12238676
Sent from the JQuery mailing list archive at Nabble.com.
