Table odd and even row style : Table « HTML Tags « JavaScript Tutorial






Quote from:
Sams Teach Yourself JavaScript in 21 Days (Paperback)
by Jonathan A. Watt (Author), Andrew H. Watt (Author), Jinjer Simon (Author), Jonathan A Watt (Author)

# Paperback: 784 pages
# Publisher: Sams; 1st edition (April 29, 2002)
# Language: English
# ISBN-10: 0672322978
# ISBN-13: 978-0672322976
<html>
<head>
<title>My Emails</title>

<style type="text/css">
th        {background-color: #999999}
tr.odd    {background-color: #cccccc}
tr.even   {background-color: #ffffff}
th, td    {padding: 0.1em 1em}
</style>

<script language="javascript" type="text/javascript">
<!--

var emails    = new Array();

for (var i=0; i<4; i++) {
    emails[i] = new Array();
}

    emails[0]["From"] = "A";
    emails[0]["Date"] = "2007-07-31";
    emails[0]["Subject"] = "Hi";

    emails[1]["From"] = "Info@java2s.com";
    emails[1]["Date"] = "2007-07-30";
    emails[1]["Subject"] = "Welcome";

    emails[2]["From"] = "New Examples";
    emails[2]["Date"] = "2007-07-29";
    emails[2]["Subject"] = "New JavaScript";

    emails[3]["From"] = "Unwanted Spam";
    emails[3]["Date"] = "2007-07-28";
    emails[3]["Subject"] = "Annoying Email";

function sortByFrom(a, b)
{
     var A = a["From"].toLowerCase();
     var B = b["From"].toLowerCase();
     if (A < B) return -1;
     if (A > B) return  1;
     return 0;
}

function sortByDate(a, b)
{
     var A = a["Date"];
     var B = b["Date"];
     if (A < B) return -1;
     if (A > B) return  1;
     return 0;
}

function sortBySubject(a, b)
{
     var A = a["Subject"].toLowerCase();
     var B = b["Subject"].toLowerCase();
     if (A < B) return -1;
     if (A > B) return  1;
     return 0;
}

var sortCriteria = location.search.substr(1);

if (sortCriteria) {
  emails.sort(eval(sortCriteria));
}

//-->
</script>

</head>
<body>

<h1>My Emails</h1>

<table>
  <tr>
    <td><a href="?sortByFrom">From</a></td>
    <td><a href="?sortByDate">Date</a></td>
    <td><a href="?sortBySubject">Subject</a></td>
  </tr>

<script language="javascript" type="text/javascript">
<!--

for (var i=0; i<emails.length; i++) {
  document.write("  <tr class='" + ((i%2)? "odd": "even") + "'>");

  document.write("    <td>" + emails[i]["From"] + "</td>");
  document.write("    <td>" + emails[i]["Date"] + "</td>");
  document.write("    <td>" + emails[i]["Subject"] + "</td>");

  document.write("  </tr>");
}

//-->
</script>

</table>

</body>
</html>








21.13.Table
21.13.1.Table odd and even row style
21.13.2.Inserrt a table cell