Last column in a table not clickable

Last column in a table not clickable

I currently have a pretty crazy code that make it possible to click and
expand rows in a dynamic table. My problem is that I need to make the last
column in the table not clickable, and I have no idea how to do that. I
have searched the internet and tried different things, but nothing seems
to help.
This is my table:
<table id="myTable">
<tr>
<th>Name</th>
<th>Type</th>
<th>Details</th>
</tr>

<tr class="record">
<td>
{{this.name}}
</td>
<td>
{{this.type}}
</td>
<td id="details">
<img style="height: 20px; width: 20px"
src="img/arrow_right.png">
</td>
</tr>
{{/each}}
</table>
I want to make that last column (ID = "details") not clickable.
This is my crazy click event:
$("#myTable").on("click", "tr.record", function () {
var rowIndex = this.rowIndex,
services = null;
var self = this;
$.ajax({
url: "api/relation",
type: 'GET',
success: function (response) {
if (response[rowIndex - 1].relationStats) {
services = response[rowIndex -
1].relationStats.PROVIDES_SERVICE;
}
if (services > 0 && $(self).hasClass('record active')) {
console.log("CLOSING");
$(self.nextSibling).remove();
$(self).removeClass('active');
} else if (services > 0) {
console.log("OPENING");
var openDetails =
$('<tr/>').addClass('openDetails').insertAfter(self);
$(self).addClass('active');
var td =
$('<td/>').addClass('td').appendTo(openDetails);
$('<p/>').html("Provides
service(s):&nbsp").appendTo(td);
$('<td/>').html(services).appendTo(openDetails);
}
}
});
});
Any help would be appreciated!