To keep changes to your code minimal, I have made a slight adjustment:
You can access the link here.
Html (added class on tr):
<table id="tblBAENWC" class="table table-stripped table-bordered table-hover table-condensed col-sm-12">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
</tbody>
</table>
Javascript (look after comment "my add"):
var test = function(element) {
var tdCaller = $(element);
var parentRow = tdCaller.parent();
var parentBody = parentRow.parent();
// my add
$('tr.mytr.clicked').removeClass('clicked')
parentRow.addClass('clicked');
}
CSS (look after comment "my add"):
.MarkSelectedRow {
background-color: cornflowerblue;
}
/* my add */
.table-hover tbody tr.mytr.clicked {
background-color: white;
}