Column selection and URL modification I have an HTML table representing a database table and a sidebar which holds different anchors ready to perform CRUD operations on click.

Because the hrefs in the anchors aren't in general valid for all columns I have written a script which automatically inserts the id of a selected column into the hrefs:

/localhost/image/var/edit =&gt; /localhost/image/4/edit


The code I have written works but it isn't very clean and smart :( Could somebody take a look and say where I have space of improvement?

&lt;script type="text/javascript"&gt;
$('table tr').click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    var name = $(this).find('td:nth-child(2)').html();

    $('.image_bar ul li a').each(function(){
        $(this).attr('href', $(this).attr('href').replace('var', name));
    });
});
&lt;/script&gt;


How could I improve the td:nth-child(2) selector and the long line modifying the link?

EDIT:

&lt;aside class="left image_bar"&gt;
&lt;ul&gt;
    {% if image is defined %}
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_index')}}"&gt;Bilder verwalten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_show', { name: image.name }) }}"&gt;Bild betrachten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_new') }}"&gt;Bild hinzufügen&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_edit', { name: image.name }) }}"&gt;Bild bearbeiten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_delete', { name: image.name }) }}"&gt;Bild löschen&lt;/a&gt;&lt;/li&gt;
    {% else %}
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_index')}}"&gt;Bilder verwalten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_show', { name: 'var' }) }}"&gt;Bild betrachten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_new') }}"&gt;Bild hinzufügen&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_edit', { name: 'var' }) }}"&gt;Bild bearbeiten&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="{{ path('AcmeCoreBundle_Image_delete', { name: 'var' }) }}"&gt;Bild löschen&lt;/a&gt;&lt;/li&gt;
    {% endif %}
&lt;/ul&gt;
&lt;/aside&gt;


As you see when having an available singe object (while editing, showing, deleting) the server side renders the right id/name into the href. Under circumstances when I only have a collection of objects or none object available, jquery has to do the rendering of the right urls. Also some URLs don't require an id (new, index)
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
    var $lastSelected = $([]);
    $('tr').click(function () { //tr tag is always inside a table
        $lastSelected.removeClass('selected'); //by caching this variable in the closure we don't need to traverse for it again
        $lastSelected = $(this).addClass('selected');
    });

    $('.image_bar a').click(function (e) { 
        var url = $(this).attr('href').split('var'), //both checks if var is there and prepares for the replacement
            name;
        if ($lastSelected.length === 0) {
            return url.length==1; //any urls that do not have var in them will still work
        }

        name = $lastSelected.children().eq(2).html();
        window.location = url.join(name);
    });
});
&lt;/script&gt;

Here I am assuming your toolbar is outside of your table.
About the changes:

$(function () { lets you move this script tag elsewhere in your document (perhaps to an external script)
By caching $lastSelected, fewer DOM traversals need to happen.
Knowing $lastSelected enables moving the $.fn.each call out of the tr click event by setting name inside of it.
Since the .each call is no longer in the click event, it can be a click event of its own (no more need to iterate over it).
Instead of modifying the a tags we can just set window.location since we are now in the event where the user has clicked.
Finally, if a row is not selected up front, the $lastSelected variable will not provide a valid name. Thus we shouldn't allow the link to be clicked if it contains var (done by the return statement).