[jQuery] Re: Filter based on width attribute

[Michael Geary]

I think you're missing some [] in your filter selector:

    $('td').filter('[width="65%"]').click...

Also, I strongly recommend using single quotes instead of double quotes for
all your JavaScript strings. As you can see, it eliminates the need for the
backslash escaping in the filter selector, and it also helps you avoid using
invalid code like the <a href='...'> that the code generates. HTML
attributes are supposed to use double quotes, not single quotes, so by using
single quotes for your JS strings it's easy to use double quotes inside
them:

    .replaceWith( '<td width="65%">...' )

Instead of:

    .replaceWith( "<td width='65%'>..." )

One last tip... Here's a nice clean way to generate that HTML code:

    $(this).replaceWith( S(
        '<td width="65%">',
            '<a href="classDetails.php?class=', $(this).text(), '">',
                $(this).text(),
            '</a>',
        '</td>'
    ));

This way you can indent it so it's much easier to keep track of whether
you've closed your tangs and such.

S() is this handy string concatenation function, which can be faster than
using + when you have a lot of strings to concatenate, and I think the ,
instead of + makes it a little easier to read too.

    function S() {
        return Array.prototype.join.call( arguments, '' );
    }

-Mike

> From: jhead
> 
> I am wanting to turn all TD tags, that have width="65%", into 
> links, based on the tag text, when the page loads.
> I don't have access to change the HTML itself.
> 
> I have gotten part way there, but have been unable to get the 
> filter to work:
> 
> [code]
>               <script language="JavaScript">
>                       $(document).ready(function(){
> 
>                       
> $("td").filter("width=\"65%\"").click(function () {
>                               $(this).replaceWith("<td 
> width='65%'><a href='classDetails.php?class=" + 
> $(this).text() + "'>" + $
> (this).text() + "</a></td>");
>                       });
> 
>                       });
>               </script>
> [/code]
> 
> And here is some of the HTML from the document:
> 
> [code]
> <tr valign="top">
>             <td nowrap="nowrap" width="10%" align="right">&nbsp;</td>
>             <td nowrap="nowrap" width="20%">&nbsp;</td>
>             <td width="65%">Introductory Chemistry I</td>
>             <td nowrap="nowrap" width="5%" align="right">3</td>
> 
>         </tr>
> [/code]
> 
> What would I need to add to filter out all the TD tags that 
> don't have width="65%"?
> And have it take effect after the page loads instead of on click?
> I tried to replace click with ready, but no effect. And 
> removing the ready wrapper breaks things.
> 
> Thanks,
> JHead
>