Newbie at Javascript needs help

staalkoppie · 04-21-2012, 02:25 PM

Hi guys,

Started studying HTML , but having a bit of a problem creating <table>s.

My instruction is to :"format the row in the table so that they alternate from white to grey. Within the grey rows format the text to white, Withing the white rows, format the text to black.
I created a table for this in a previous exercise which I'll paste in the bottom. If I understand correctly, I need to use the table's <tr> element, but I don't know how it should be formatted. Any suggestions would be greatly appreciated.

Here is what I got so far;

<form action="" name="newsHeadlines">
<table border="0" width="100%">
<tr valign="top">
<td>
<select name="headline" multiple="multiple" style="height: 93px">
<option onclick="document.newsHeadlines.news.value=newsItem1">
Investigation of building standards in quake zone
</option>

<option onclick="document.newsHeadlines.news.value=newsItem2">
Obama sees signs of economic progress
</option>

<option onclick="document.newsHeadlines.news.value=newsItem3">
Apple aplication downloads approach 1 Billion
</option>

<option onclick="document.newsHeadlines.news.value=newsItem4">
Jones, Braves beat winless Nationals 8-5
</option>

<option onclick="document.newsHeadlines.news.value=newsItem5">
America's uninsured haven't shown collective power
</option>
</select>
</td>
<td>
<textarea name="news" cols="50" rows="10" style="background-color : Transparent"></textarea>
</td>
</tr>
</table>

<script type="text/javascript">
/* <![CDATA[ */
/8 ]]> */

var newsItem1 = "Example1";
var newsItem2 = "Example2";
var newsItem3 = "Example3";
var newsItem4 = "Example4";
var newsItem5 = "Example5";

</script>

</form>

jmrker · 04-21-2012, 02:54 PM

What is the purpose of the multiple <select> element?

You are not using, nor is the syntax correct for

Quote:

/* <![CDATA[ */
/8 ]]> */

Finally, you should enclose your script between [ code] and [/ code] tags (without the spaces)
to make it easier to spot, copy, review or test your code.

jmrker · 04-21-2012, 03:07 PM

You should try creating the problem using HTML first.
Then change the appropriate parts to incorporate a JS solution to accomplish the same task.

Code:

<html>
<head>
<title> Untitled </title>

<script type="text/javascript">
// Note: no JS needed for this solution
</script>

<style type="text/css">
 .bonw { color:black; background-color:white; }
 .wonb { color:white; background-color:darkgray; }
</style>

</head>
<body>
<table border="1" id="tbl">
 <tbody>
 <tr class="wonb">
  <td>Row 1 - Col 1</td><td>Row 1 - Col 2</td><td>Row 1 - Col 3</td><td>Row 1 - Col 4</td><td>Row 1 - Col 5</td>
 </tr>
 <tr class="bonw">
  <td>Row 2 - Col 1</td><td>Row 2 - Col 2</td><td>Row 2 - Col 3</td><td>Row 2 - Col 4</td><td>Row 2 - Col 5</td>
 </tr>
 <tr class="wonb">
  <td>Row 3 - Col 1</td><td>Row 3 - Col 2</td><td>Row 3 - Col 3</td><td>Row 3 - Col 4</td><td>Row 3 - Col 5</td>
 </tr>
 <tr class="bonw">
  <td>Row 4 - Col 1</td><td>Row 4 - Col 2</td><td>Row 4 - Col 3</td><td>Row 4 - Col 4</td><td>Row 4 - Col 5</td>
 </tr>
 <tr class="wonb">
  <td>Row 5 - Col 1</td><td>Row 5 - Col 2</td><td>Row 5 - Col 3</td><td>Row 5 - Col 4</td><td>Row 5 - Col 5</td>
 </tr>
 <tr class="bonw">
  <td>Row 6 - Col 1</td><td>Row 6 - Col 2</td><td>Row 6 - Col 3</td><td>Row 6 - Col 4</td><td>Row 6 - Col 5</td>
 </tr>
 <tr class="wonb">
  <td>Row 7 - Col 1</td><td>Row 7 - Col 2</td><td>Row 7 - Col 3</td><td>Row 7 - Col 4</td><td>Row 7 - Col 5</td>
 </tr>
 <tr class="bonw">
  <td>Row 8 - Col 1</td><td>Row 8 - Col 2</td><td>Row 8 - Col 3</td><td>Row 8 - Col 4</td><td>Row 8 - Col 5</td>
 </tr>
 <tr class="wonb">
  <td>Row 9 - Col 1</td><td>Row 9 - Col 2</td><td>Row 9 - Col 3</td><td>Row 9 - Col 4</td><td>Row 9 - Col 5</td>
 </tr>
 </tbody>
</table>

</body>
</html>

felgall · 04-21-2012, 10:58 PM

If you exclude antiquated versions of IE then no classes are needed either.

Code:

tr:nth-child(odd) { color:black; background-color:white; }
tr:nth-child(even) { color:white; background-color:darkgray; }

If you are supposed to be using classes and attaching them to the table using JavaScript then take a look at http://javascriptexample.net/domtable11.php - you only need to attach a class to the alternate rows as you can let half the rows pick up the default styling of the table.