HTML table representing a database table and a sidebar

Question

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 => /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?

<script type="text/javascript" src="{{ asset('bundles/acme/js/jquery.js'></script>
<script type="text/javascript">
$('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);
    });
});
</script>

Answer 1

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:

<table>
   <tr data-id="1"><td>bla</td><td>bla</td><td>bla</td></tr>
   <tr data-id="2"><td>bla</td><td>bla</td><td>bla</td></tr>
</table>

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