Trying to highlight table row using JQuery but not working, can anyone tell me why an
Trying to hightlight table row using JQuery but not working, can anyone tell me why and how to fix it?
table:
HTML Code:
<table id="customers">
<caption>Customers</caption>
<thead>
<tr>
<th>Customer no</th>
<th>Last name</th>
<th>First name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr class="alt">
<td>1</td>
<td>Jackson</td>
<td>Simon</td>
<td>
<div class="align-left">
<input type="submit" name="View" id="view" value="View" />
</div>
<div class="align-right">
<input type="submit" name="Rent" id="rent" value="Wants to rent" />
</div>
</td>
</tr>
<tr class="alt">
<td>1</td>
<td>Miller</td>
<td>Darren</td>
<td>
<div class="align-left">
<input type="submit" name="View" id="view" value="View" />
</div>
<div class="align-right">
<input type="submit" name="Rent" id="rent" value="Wants to rent" />
</div>
</td>
</tr>
</tbody>
</table>
Code:
$("#customers tbody tr").hover(
function () {
$(this).css({
background: 'yellow'
});
},
function () {
$(this).css("background", "");
});
Code:
...
/* table data style */
table {
border-collapse: collapse;
width: 400px;
color: grey;
font-family: sans-serif;
}
th, td {
border-bottom: 1px solid brown;
padding: 5px;
background-color: seashell;
text-align: left;
}
th {
width: 200px;
}
td {
width: 200px;
}
tr.alt td, tr.alt th {
background-color: white;
}
tr:last-child td, tr:last-child th {
border-bottom: 0;
}
caption {
font-weight: bold;
padding-bottom: 5px;
}
.main-font {
font-family: sans-serif;
}
What happens is the table row does not get highlighted when hovering over it, please also note that it works for a td when i adjust the selector, just wont work for tr row.
