Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Newbie at Javascript needs help

    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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,028
    Thanks
    36
    Thanked 494 Times in 488 Posts
    What is the purpose of the multiple <select> element?

    You are not using, nor is the syntax correct for
    /* <![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.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,028
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    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>

  • Users who have thanked jmrker for this post:

    staalkoppie (04-22-2012)

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,479
    Thanks
    0
    Thanked 635 Times in 625 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    staalkoppie (04-22-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •