The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

478504 (1) [Avatar] Offline
#1
I am just getting started. The code is small so I include here.

Can someone tell me what I must do/add to get "stripes"
appear in my Mozilla Firefox browser like in Figure 3.2.

Thank you.

andrew.m.neiderer@gmail.com


------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
style="width:100%; height:100%; border:0; margin:0; padding:0;">
<head>
<!-- FileName: zebraStripes.xhtml -->
<!-- -->
<!-- Description: alternating backgrounds in a table; -->
<!-- pp. 67-68 of jQuery in Action (2nd edition), -->
<!-- Manning Publications, 2010. -->
<!-- -->
<!-- By: Bear Bibeault and Yehuda Katz. -->
<!-- -->
<!-- Modified: Andrew M. Neiderer. 3 July 2017. -->

<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<!-- external cascading style sheet (CSS); -->
<!-- internal CSS. -->
<link rel="stylesheet" type="text/css"
href="/home/andrewmneiderer/libs/core.css"/>
<style type="text/css">
body, td {
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
width: 480px;
}
th {
border: 2px ridge maroon;
background-color: maroon;
color: white;
padding: 3px 12px;
}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: gold;
}
td {
padding: 1px 8px;
}
</style>

<!-- jQuery library -->
<script type="text/javascript"
src="/home/andrewmneiderer/libs/jquery-1.4.js"/>

<!-- add striped class -->

<script type="text/javascript">
$(function()
{
$("table tr:nth-child(even)").addClass("striped");
$("table").mouseover(swapThem).mouseout(swapThem);
});

function swapThem()

{
$('tr').toggleClass('striped');
}
</script>

<title>
Disco Zebra Stripes!
</title>
</head>

<body>
<table>
<tr>
<th> Year </th>
<th> Make </th>
<th> Model </th>
</tr>
<tr>
<td> 1965 </td>
<td> Ford </td>
<td> Mustang </td>
</tr>

<tr>
<td> 1970 </td>
<td> Toyota </td>
<td> Corolla </td>
</tr>
<tr>
<td> 1979 </td>
<td> AMC </td>
<td> Jeep CJ-5 </td>
</tr>

<tr>
<td> 1983 </td>
<td> Ford </td>
<td> EXP </td>
</tr>
<tr>
<td> 1985 </td>
<td> Dodge </td>
<td> Daytona </td>
</tr>
<tr>
<td> 1990 </td>
<td> Chrysler </td>
<td> Jeep Wrangler Sahara </td>
</tr>
<tr>
<td> 1995 </td>
<td> Ford </td>
<td> Ranger </td>
</tr>
<tr>
<td> 1997 </td>
<td> Chrysler </td>
<td> Jeep Wrangler Sahara </td>
</tr>
<tr>
<td> 2000 </td>
<td> Chrysler </td>
<td> Jeep Wrangler Sahara </td>
</tr>
<tr>
<td> 2005 </td>
<td> Chrysler </td>
<td> Jeep Wrangler Unlimited </td>
</tr>
<tr>
<td> 2007 </td>
<td> Dodge </td>
<td> Caliber R/T </td>
</tr>
</table>
</body>
</html>