JavaScript Highlight Selected Table Row

Question

Basically I have a dynamically created table. What I am trying to do is when the link in certain row is selected, the selected row will be highlighted with background-color. If I select another row, the previous selected row background color will be removed. Here is the JavaScript of my table:

var nameLocate = "";
var allcookies = document.cookie;
// SPLIT ARRAY x1st
cookiearray = allcookies.split(';');
$('#divBookmarkResults').fadeIn();

// Now take key value pair out of this array
var htmlStr = "";
htmlStr = htmlStr + "<p style='font-size:9pt;align:left;margin:5px 0px 0px 15px;'>Below are the list of bookmarks stored:</p>";
htmlStr = htmlStr + "<div id='bookmarkResult' style='width:90%; height:105px;'>";
htmlStr = htmlStr + "<table width='100%' id='bookmarkTable' height='50px' style='margin: 10px 0px 0px 15px; border-collapse: collapse'>";
// for each of the cookies within the array get out the values for name and x/y
for (var i = 0; i < cookiearray.length; i++) {
    var bookmarkPosition = i + 1;
    // SPLIT ARRAY x2nd 
    var locationarray = cookiearray[i].split(':');
    var noCookieID = locationarray[0].split('=');

    cookieIndex = noCookieID[0];
    nameLocate = noCookieID[1];

    xValue = locationarray[1];
    yValue = locationarray[2];

    htmlStr = htmlStr + "<tr class='BookmarkIndex" + bookmarkPosition + "'>";
    htmlStr = htmlStr + "<td><a style='font-family:Arial; font-size:8pt; color:#00CCFF;' href='JavaScript:ZoomTo(" + xValue + "," + yValue + "," + bookmarkPosition + ")'>" + nameLocate + "</a>";
    htmlStr = htmlStr + "<td width='25px' style='padding:0px 0px 0px 5px; margin:0;'><img onclick=\"DeleteBookmarkPlace('bookmarkTable'," + bookmarkPosition + "," + xValue + "," + yValue + ",'" + cookieIndex + "','" + nameLocate + "');\" src='img/recycleBin.png' style='cursor:pointer; width:25px; height: 25px;' /></td>";
    htmlStr = htmlStr + "</td>";
    htmlStr = htmlStr + "</tr>";
}
htmlStr = htmlStr + "</table>";
htmlStr = htmlStr + "</div>";
document.getElementById('divBookmarkResults').innerHTML = htmlStr

I have found some solution online but it does not seems working:

<tr onclick="this.style.backgroundColor='red'">

Any guides?

Thanks in advance.

Answer 1

Since you've mentioned you can use jQuery in the comments, you can try something like the following:

css

.highlighted{
 background:red;
}

Script

$('#divBookmarkResults').on('click','tr', function(){
 $('.highlighted').removeClass('highlighted');
 $(this).addClass('highlighted');
});

this assumes that #divBookmarkResults is a static element in the document, if it's not bind the handler to a higher level static parent, or as a last resort, to document itself which is the root element. This has the advantage of not having to bind an event handler to each <tr> . if you want to target only the <tr> in body, you can change the selector to tbody tr