BizJones244
Versioning Strategist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
In this article, we are going to learn Table Row And Column Highlight On Hover Using JavaScript. The table row and column will be highlighted when the mouse hovers it. With the help of a script, this would be easy for us. So, let's try.
Table Form - HTML
This is the table where the user hovers it to highlighting the row and column.
The Script
This script will help us to do the function.
And, this is the style.
Output:
The user mouse hovers to the table row side.
The user mouse hovers to the table column side.
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
Table Form - HTML
This is the table where the user hovers it to highlighting the row and column.
- <table
class
=
"tutorial-table"
border
=
"1"
>
- <thead
>
- <tr
>
- <th
class
=
"table-header"
width
=
"10%"
>
No.</
th
>
- <th
class
=
"table-header"
>
Title</
th
>
- <th
class
=
"table-header"
>
Description</
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
class
=
"table-row"
>
- <td
>
1.</
td
>
- <td
>
Solace</
td
>
- <td
>
A psychic works with the FBI in order to hunt down a serial killer.</
td
>
- </
tr
>
- <tr
class
=
"table-row"
>
- <td
>
2.</
td
>
- <td
>
Sunset Song</
td
>
- <td
>
The daughter of a Scottish farmer comes of age in the early 1900s.</
td
>
- </
tr
>
- <tr
class
=
"table-row"
>
- <td
>
3.</
td
>
- <td
>
The Trust</
td
>
- <td
>
Waters and Stone are two nobody police officers who work in the evidence room of the Las Vegas Police.</
td
>
- </
tr
>
- <tr
class
=
"table-row"
>
- <td
>
4.</
td
>
- <td
>
The Huntsman: Winter's War</
td
>
- <td
>
This follow-up to Snow White and the Huntsman begins when we see how Ravenna took over Snow White's.</
td
>
- </
tr
>
- <tr
class
=
"table-row"
>
- <td
>
5.</
td
>
- <td
>
Confirmation</
td
>
- <td
>
Judge Clarence Thomas' nomination to the United States' Supreme Court is called into question when former colleague, Anita Hill, testifies that he had sexually harassed her.</
td
>
- </
tr
>
- </
tbody
>
- </
table
>
The Script
This script will help us to do the function.
- <
script src=
"js/code_js.js"
></
script>
- <
script src=
"js/code_js1.js"
></
script>
- <
script>
- $(
document)
.ready
(
function
(
)
{
- $(
'.table-row'
)
.hover
(
function
(
)
{
- $(
this
)
.addClass
(
'current-row'
)
;
- }
,
function
(
)
{
- $(
this
)
.removeClass
(
'current-row'
)
;
- }
)
;
- $(
"th"
)
.hover
(
function
(
)
{
- var
index =
$(
this
)
.index
(
)
;
- $(
"th.table-header, td"
)
.filter
(
":nth-child("
+
(
index+
1
)
+
")"
)
.addClass
(
"current-col"
)
;
- $(
"th.table-header"
)
.filter
(
":nth-child("
+
(
index+
1
)
+
")"
)
.css
(
"background-color"
,
"blue"
)
- }
,
function
(
)
{
- var
index =
$(
this
)
.index
(
)
;
- $(
"th.table-header, td"
)
.removeClass
(
"current-col"
)
;
- $(
"th.table-header"
)
.filter
(
":nth-child("
+
(
index+
1
)
+
")"
)
.css
(
"background-color"
,
"red"
)
- }
)
;
- }
)
;
- </
script>
And, this is the style.
- <style type=
"text/css"
>
- body {
- width
:
700px
;
- margin
:
auto
;
- }
- .current-row
{
- background-color
:
pink
;
- cursor
:
pointer
;
- color
:
#FFF
;
- font-size
:
20px
;
- }
- .current-col
{
- background-color
:
skyblue
;
- color
:
#FFF
;
- cursor
:
pointer
;
- font-size
:
20px
;
- }
- .tutorial-table
{
- width
:
100%
;
- font-size
:
18px
;
- border
:
blue
1px
solid
;
- border-spacing
:
initial
;
- margin
:
20px
;
- word-break
:
break-word
;
- table-layout
:
fixed
;
- cursor
:
pointer
;
- }
- .tutorial-table
th.table-header
{
- background-color
:
white
;
- text-align
:
center
;
- padding
:
10px
;
- cursor
:
pointer
;
- }
- .tutorial-table
.table-row
td {
- padding
:
10px
;
- cursor
:
pointer
;
- }
- </style>
Output:
The user mouse hovers to the table row side.
The user mouse hovers to the table column side.
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view hidden text.