www.webdeveloper.com
Results 1 to 11 of 11

Thread: How to populate a table based on a selection from a drop down menu

  1. #1
    Join Date
    Apr 2005
    Posts
    23

    How to populate a table based on a selection from a drop down menu

    I'm absolutely useless with JavaScript, but I need this table to work with it.

    I'm trying to create a table that will populate a row of cells based upon a selection from a drop down menu. The drop down menu sits at the top of the third and final column in my table and should populate the cells directly below it. Each selection from the drop down menu has to populate 23 cells.

    Finally the page is written in HTML5 with an external CSS3 stylesheet and it will have an external JavaScript file to make the whole thing work.

    If anyone can tell me how to do it, even if it's just the basic workings of the code, it would be appreciated.

    Here is the code for the table:
    Code:
    <form id="alive-chat">       
                <table>
                    <thead>
                        <tr>
                            <th>
                                <span class="bgthead" >Vendor</span>
                            </th>
                            <th>
                                <span class="bgthead" >Product</span>
                            </th>
                            <th>
                            	<span class="bgthead" >
                                    <select name="features">
                                        <option value="1">Operators Included </option>
                                        <option value="2">Additional Operators </option>
                                        <option value="3">Mobile Chat </option>
                                        <option value="4">Visitor Chat Window </option>
                                        <option value="5">Multiple Website </option>
                                    </select>
                                </span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                            <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Lite</td>
                            <td>2</td>
                        </tr>
                        <tr class="alt">
                            <td>
                                <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Pro</td>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Pro+</td>
                            <td>2</td>
                        </tr>
                        <tr class="alt">
                            <td>
                                <span class="bg" >Zopim</span>
                            </td>
                            <td>Lite</td>
                            <td>1</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Zopim </span>
                           </td>
                           <td>Basic</td>
                           <td>1</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Zopim </span>
                           </td>
                           <td>Advanced</td>
                           <td>1</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Velaro</span>
                           </td>
                           <td>Basic</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Velaro</span>
                           </td>
                           <td>Business</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Velaro</span>
                           </td>
                           <td>Omni</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Comm 100</span>
                           </td>
                           <td>Basic</td>
                           <td>2</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Comm 100</span>
                           </td>
                           <td>Professional</td>
                           <td>2</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Comm 100</span>
                           </td>
                           <td>Enterprise</td>
                           <td>2</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Solo</td>
                           <td>1</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Team</td>
                           <td>1</td>
                        </tr>
                      <tr>
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Enterprise</td>
                           <td>1</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Live Zilla</span>
                           </td>
                          <td>One</td>
                          <td>&nbsp;</td>
                        </tr>
                      <tr>
                          <td>
                              <span class="bg" >Live Zilla</span>
                          </td>
                          <td>Pro</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Bronze</td>
                          <td>1</td>
                        </tr>
                        <tr>
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Gold</td>
                          <td>4</td>
                        </tr>
                        <tr class="alt">
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Platinum</td>
                          <td>8</td>
                        </tr>
                        <tr>
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Ultimate</td>
                          <td>15</td>
                        </tr>
                        <tr class="alt">
                          <td>
                              <span class="bg" >Whos On</span>
                          </td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td>
                              <span class="bg" >Live Help Now</span>
                          </td>
                          <td>&nbsp;</td>
                          <td>1</td>
                        </tr>
                    </tbody>
                </table>
            </form>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    Where does the information come from to populate the final column?
    Does it replace the current (and blank) entries of the display?
    Will there be 5 groups of 23 values that you have yet to provide?
    What do you expect the CSS to look like?

    So many questions with so little time to code without complete information!

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Lightbulb

    I have no idea if this meets your needs, but it is one way to accomplish your task.
    Are there better ways? Sure. But you will need to specify the requirements a lot better.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
    .ag { text-align:right; }
    .bg { color:white; background-color:red; font-weight:bold; font-size:1.2em; }
    </style>
    
    </head>
    <body>
    <form id="alive-chat" action="" method="post" onsubmit="return false">       
    <table>
     <thead>
      <tr>
       <th> <span class="bgthead" >Vendor</span> </th>
       <th> <span class="bgthead" >Product</span> </th>
       <th>
        <span class="bgthead" >
         <select name="features" onchange="alterColumn(this.selectedIndex)">
          <option value="1">Operators Included </option>
          <option value="2">Additional Operators </option>
          <option value="3">Mobile Chat </option>
          <option value="4">Visitor Chat Window </option>
          <option value="5">Multiple Website </option>
         </select>
        </span>
       </th>
      </tr>
     </thead>
     <tbody id="tblBody">
      <tr>
       <td> <span class="bg" >Alive Chat</span> </td>
       <td>Lite</td>
       <td class="ag">2</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Alive Chat</span> </td>
       <td>Pro</td>
       <td class="ag">2</td>
      </tr>
      <tr>
       <td> <span class="bg" >Alive Chat</span> </td>
       <td>Pro+</td>
       <td class="ag">2</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Zopim</span> </td>
       <td>Lite</td>
       <td class="ag">1</td>
      </tr>
      <tr>
       <td> <span class="bg" >Zopim </span> </td>
       <td>Basic</td>
       <td class="ag">1</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Zopim </span> </td>
       <td>Advanced</td>
       <td class="ag">1</td>
      </tr>
      <tr>
       <td> <span class="bg" >Velaro</span> </td>
       <td>Basic</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Velaro</span> </td>
       <td>Business</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr>
       <td> <span class="bg" >Velaro</span> </td>
       <td>Omni</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Comm 100</span> </td>
       <td>Basic</td>
       <td class="ag">2</td>
      </tr>
      <tr>
       <td> <span class="bg" >Comm 100</span> </td>
       <td>Professional</td>
       <td class="ag">2</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Comm 100</span> </td>
       <td>Enterprise</td>
       <td class="ag">2</td>
      </tr>
      <tr>
       <td> <span class="bg" >Live Chat</span> </td>
       <td>Solo</td>
       <td class="ag">1</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Live Chat</span> </td>
       <td>Team</td>
       <td class="ag">1</td>
      </tr>
      <tr>
       <td> <span class="bg" >Live Chat</span> </td>
       <td>Enterprise</td>
       <td class="ag">1</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Live Zilla</span> </td>
       <td>One</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr>
       <td> <span class="bg" >Live Zilla</span> </td>
       <td>Pro</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Olark</span> </td>
       <td>Bronze</td>
       <td class="ag">1</td>
      </tr>
      <tr>
       <td> <span class="bg" >Olark</span> </td>
       <td>Gold</td>
       <td class="ag">4</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Olark</span> </td>
       <td>Platinum</td>
       <td class="ag">8</td>
      </tr>
      <tr>
       <td> <span class="bg" >Olark</span> </td>
       <td>Ultimate</td>
       <td class="ag">15</td>
      </tr>
      <tr class="alt">
       <td> <span class="bg" >Whos On</span> </td>
       <td>&nbsp;</td>
       <td class="ag">&nbsp;</td>
      </tr>
      <tr>
       <td> <span class="bg" >Live Help Now</span> </td>
       <td>&nbsp;</td>
       <td class="ag">1</td>
      </tr>
     </tbody>
    </table>
    </form>
    
    <script type="text/javascript">
    var columnValues = [
       [2,2,2,1,1,1,'','','',2,2,2,1,1,1,'','',1,4,8,15,'',''],
       [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
       [23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],
       [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3],
       [1,2,3,4,5,6,7,8,9,0,9,8,7,6,5,4,3,2,1,2,3,4,5]
    ];
    function alterColumn(grp) {
      var sel = document.getElementById('tblBody').getElementsByTagName('td');
      var k = 0;  grp = Number(grp);    // alert(grp);
      for (var i=0; i<sel.length; i++) {
        if (sel[i].className == 'ag') { sel[i].innerHTML = columnValues[grp][k]; k++; }  
      }
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Apr 2005
    Posts
    23
    Thanks JMRKER you got the right idea, table to be populated from data in the JavaScript and replacing the current data.

    I didn't include the CSS because it controls more than just the table and is very large (at the moment), also I have no trouble building the CSS, I just wanted to keep my example to a minimum for you, talking of keeping things to a minimum there will be a total of 48 groups with 23 values.

    Your attempt at providing an answer is excellent, and I'm not sure if there is a better way, the JavaScript is great but would it be better to call the data from an external source like an XML file? I'm just thinking here of improving the load time.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435

    Arrow

    Glad my guess was helpful.

    You only needed to include the CSS portion controlling your post, like my attempt.

    You could put the values into an external JS file as one option.

    A text file read by an ajax function is another.

    XML might be an option, but I have never tried that.
    It would be interesting to see your solution should you choose this route.

  6. #6
    Join Date
    Apr 2005
    Posts
    23
    Thanks JMRKER, just one issue I have found, how do I get the JavaScript to display a text value? Some of the values need to have a Yes or No answer.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    Like the questions of earlier posts, I'm not much of a mind reader.

    Post an example or give a better description of what it is that you are trying to do.

  8. #8
    Join Date
    Apr 2005
    Posts
    23
    Sorry JMRKER, The JavaScript below produces numeric answers, like 1,2,3 etc. but some of my answers need to be 'Yes', 'No' or '$6.50' etc.

    Code:
    var columnValues = [
       [2,2,2,1,1,1,'','','',2,2,2,1,1,1,'','',1,4,8,15,'',''],
       [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
       [23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],
       [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3],
       [1,2,3,4,5,6,7,8,9,0,9,8,7,6,5,4,3,2,1,2,3,4,5]
    ];
    If I change the var columnValues to text it produces an error, for example:

    Code:
    <script type="text/javascript">
    var columnValues = [
       [2,2,2,1,1,1,'','','',2,2,2,1,1,1,'','',1,4,8,15,'',''],
       [yes,2,no,4,$4.50,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
       [23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1],
       [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3],
       [1,2,3,4,5,6,7,8,9,0,9,8,7,6,5,4,3,2,1,2,3,4,5]
    ];
    function alterColumn(grp) {
      var sel = document.getElementById('tblBody').getElementsByTagName('td');
      var k = 0;  grp = Number(grp);    // alert(grp);
      for (var i=0; i<sel.length; i++) {
        if (sel[i].className == 'ag') { sel[i].innerHTML = columnValues[grp][k]; k++; }  
      }
    }
    </script>

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,435
    Put the yes, no and $4 into single quotes.
    Example: 'yes', 'no', '$4'

  10. #10
    Join Date
    Apr 2005
    Posts
    23
    Thanks JMRKER

  11. #11
    Join Date
    Apr 2005
    Posts
    23
    This Thread is now closed

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles