HTML and CSS Reference
In-Depth Information
The tasks.css file already contains a class that can set the text of an element to bold:
.rowHighlight {
font-weight:bold;
}
As a first attempt at this code, we will try adding the following to the script block of
tasks.html:
$('tbody tr').click(function(evt) {
$(evt.target).toggleClass('rowHighlight');
});
This is adding a click listener to all rows in the
table
body. When invoked, this will add the
rowHighlighted
class to the element that was clicked.
If you debug this you will notice that the value of
evt.target
is in fact the element that
has been clicked on (the
td
element) rather than the
tr
element, therefore only a single cell
highlights in bold.
//
The next chapter will address debugging JavaScript code. If you are unfamiliar
with the Chrome debugger, and would like to see this for yourself, you may want
to
jump ahead
to that chapter.
As a second attempt, we could try to find the
tr
element that is the parent of the element
that was clicked, and add the class to this element. This also will not work, since
td
ele-
ments have been defined with normal font-styles in tasks.css, therefore they will not inherit
font-style from their parents.
What we want to do is add this class to all the
td
elements in the row that is selected. We
could attempt this as follows:
$('tbody tr').click(function(evt) {
$(evt.target).siblings( ).toggleClass( 'rowHighlight');
});
There are two problems remaining with this. The
siblings
function returns a set of all the
siblings, but leaves out the element that has been clicked, so all cells except the one clicked
will highlight, we can solve this with the following:
$('tbody tr').click(function(evt) {
