HTML table representing a database table and a sidebar 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 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" src="{{ asset('bundles/acme/js/jquery.js'&gt;&lt;/script&gt;
&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(){
        var oldUrl = $(this).attr('href');
        var newUrl = oldUrl.replace('var', name);
        $(this).attr('href', newUrl);
    });
});
&lt;/script&gt;
I do not like too much this:

var name = $(this).find('td:nth-child(2)').html(); 


I would generally use html5 data attribute on the tr row to pass the id.

example:

&lt;table&gt;
   &lt;tr data-id="1"&gt;&lt;td&gt;bla&lt;/td&gt;&lt;td&gt;bla&lt;/td&gt;&lt;td&gt;bla&lt;/td&gt;&lt;/tr&gt;
   &lt;tr data-id="2"&gt;&lt;td&gt;bla&lt;/td&gt;&lt;td&gt;bla&lt;/td&gt;&lt;td&gt;bla&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

var selectedId = $(this).data("id");