i started a new blank html file and create or import a 6 by 8 table with an id o
ID: 3699626 • Letter: I
Question
i started a new blank html file and create or import a 6 by 8 table with an id of Content.
I then styled the table where ever other row has a different background color
Now i Need some jquey help need when you hover over the table rows I want to apply a class of highlight on the current row you are hovering, this should be in you CSS file.
I also want this page to contain an appropriate image of your choice. I would like you to position the image to the top right of the webpage using Jquery.
Here is HTML:
<html>
<head>
<link rel = "stylesheet" href="ie.css">
</link>
</head>
<body>
<img src="IMG_0340.jpg">
<div id = "Content">
<table border = "1">
<tr bgcolor="#FF0065">
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
<td>Row 1, Column 6</td>
<td>Row 1, Column 7</td>
<td>Row 1, Column 8</td>
</tr>
<tr bgcolor="#FF1974">
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
<td>Row 2, Column 5</td>
<td>Row 2, Column 6</td>
<td>Row 2, Column 7</td>
<td>Row 2, Column 8</td>
</tr>
<tr bgcolor="#FF3283">
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
<td>Row 3, Column 4</td>
<td>Row 3, Column 5</td>
<td>Row 3, Column 6</td>
<td>Row 3, Column 7</td>
<td>Row 3, Column 8</td>
</tr>
<tr bgcolor="FF4C93">
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
<td>Row 4, Column 4</td>
<td>Row 4, Column 5</td>
<td>Row 4, Column 6</td>
<td>Row 4, Column 7</td>
<td>Row 4, Column 8</td>
</tr>
<tr bgcolor="FF66A2">
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
<td>Row 5, Column 4</td>
<td>Row 5, Column 5</td>
<td>Row 5, Column 6</td>
<td>Row 5, Column 7</td>
<td>Row 5, Column 8</td>
</tr>
<tr bgcolor = "FF7FB2">
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
<td>Row 6, Column 3</td>
<td>Row 6, Column 4</td>
<td>Row 6, Column 5</td>
<td>Row 6, Column 6</td>
<td>Row 6, Column 7</td>
<td>Row 6, Column 8</td>
</div>
</tr>
</table>
</body>
</html>
Explanation / Answer
You can create a chegg.htm file and paste below code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href="ie.css">
</link>
</head>
<body>
<img src="IMG_0340.jpg">
<div id = "Content">
<table border = "1">
<tr bgcolor="#FF0065">
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
<td>Row 1, Column 5</td>
<td>Row 1, Column 6</td>
<td>Row 1, Column 7</td>
<td>Row 1, Column 8</td>
</tr>
<tr bgcolor="#FF1974">
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
<td>Row 2, Column 5</td>
<td>Row 2, Column 6</td>
<td>Row 2, Column 7</td>
<td>Row 2, Column 8</td>
</tr>
<tr bgcolor="#FF3283">
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
<td>Row 3, Column 4</td>
<td>Row 3, Column 5</td>
<td>Row 3, Column 6</td>
<td>Row 3, Column 7</td>
<td>Row 3, Column 8</td>
</tr>
<tr bgcolor="FF4C93">
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
<td>Row 4, Column 4</td>
<td>Row 4, Column 5</td>
<td>Row 4, Column 6</td>
<td>Row 4, Column 7</td>
<td>Row 4, Column 8</td>
</tr>
<tr bgcolor="FF66A2">
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
<td>Row 5, Column 4</td>
<td>Row 5, Column 5</td>
<td>Row 5, Column 6</td>
<td>Row 5, Column 7</td>
<td>Row 5, Column 8</td>
</tr>
<tr bgcolor = "FF7FB2">
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
<td>Row 6, Column 3</td>
<td>Row 6, Column 4</td>
<td>Row 6, Column 5</td>
<td>Row 6, Column 6</td>
<td>Row 6, Column 7</td>
<td>Row 6, Column 8</td>
</div>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('tr').hover(function(){
$('tr').removeClass("highlight");
$(this).addClass("highlight");
});
});
</script>
</body>
</html>
Please write below code within ie.css file
.highlight
{
background-color: yellow;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.