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 {
As a first attempt at this code, we will try adding the following to the script block of
$('tbody tr').click(function(evt) {
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 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) {
$( ).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) {
Search WWH ::

Custom Search