#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    17
    Rep Power
    0

    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>
                                        <option value="6">Offline eMail Form </option>
                                        <option value="7">Language &amp; Localisation </option>
                                        <option value="8">Font Customisation </option>
                                        <option value="9">Proactive Pop-Up </option>
                                        <option value="10">Chat Button </option>
                                        <option value="11">Operator Profile Photo </option>
                                        <option value="12">Operator Reporting Suite </option>
                                        <option value="13">Live Site Tracking </option>
                                        <option value="14">Visitor Footprint </option>
                                        <option value="15">Referrer &amp; Entry URL </option>
                                        <option value="16">Geo Location </option>
                                        <option value="17">Visitor Tracking </option>
                                        <option value="18">Efficient Routing </option>
                                        <option value="19">Chat Queue </option>
                                        <option value="20">Chat Transfer </option>
                                        <option value="21">Chat to eMail </option>
                                        <option value="22">Pre Chat Survey </option>
                                        <option value="23">Post Chat Survey </option>
                                        <option value="24">Chat Label </option>
                                        <option value="25">Multiple Department </option>
                                        <option value="26">Multiple Chat </option>
                                        <option value="27">Admin Rights </option>
                                        <option value="28">Proactive Pop-Up Invites </option>
                                        <option value="29">Chat Screen Sharing </option>
                                        <option value="30">Post Chat Archive </option>
                                        <option value="31">SSL Secure Chat </option>
                                        <option value="32">Keyword Chat Hotkeys </option>
                                        <option value="33">Auto Chat Greetings </option>
                                        <option value="34">eMail Chat Transcripts </option>
                                        <option value="35">Return Visitor Recognition </option>
                                        <option value="36">Internal Operator Chat </option>
                                        <option value="37">Away Mode Options </option>
                                        <option value="38">Survey Result </option>
                                        <option value="39">Pre Chat Survey </option>
                                        <option value="40">Administrator Analysis </option>
                                        <option value="41">Operator Performance </option>
                                        <option value="42">Proactive Pop-Up Report </option>
                                        <option value="43">Chat Trends </option>
                                        <option value="44">Concurrent Chat Report </option>
                                        <option value="45">eMail &amp; Ticket Support </option>
                                        <option value="46">Live Chat Support </option>
                                        <option value="47">Phone Support </option>
                                        <option value="48">Priority Support </option>
                                    </select>
                                </span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                            <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Lite</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                            <td>
                                <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Pro</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="bg" >Alive Chat</span>
                            </td>
                            <td>Pro+</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                            <td>
                                <span class="bg" >Zopim</span>
                            </td>
                            <td>Lite</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Zopim </span>
                           </td>
                           <td>Basic</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Zopim </span>
                           </td>
                           <td>Advanced</td>
                           <td>&nbsp;</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>&nbsp;</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Comm 100</span>
                           </td>
                           <td>Professional</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Comm 100</span>
                           </td>
                           <td>Enterprise</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr>
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Solo</td>
                           <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Team</td>
                           <td>&nbsp;</td>
                        </tr>
                      <tr>
                           <td>
                               <span class="bg" >Live Chat</span>
                           </td>
                           <td>Enterprise</td>
                           <td>&nbsp;</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>&nbsp;</td>
                        </tr>
                        <tr>
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Gold</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr class="alt">
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Platinum</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td>
                              <span class="bg" >Olark</span>
                          </td>
                          <td>Ultimate</td>
                          <td>&nbsp;</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>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </form>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    You are going to need to create a function; that will get the value of your "features" select menu's value. Then validate with a: if/else condition or switch statement condition or a while/do condition or etc. Set-up your validation to change the innerHTML of table cells and will populate the cells with text or html, as needed. Add this function to the select menu's onchange event. This should pretty much do, what you want to do. Here is a basic example of how to do this:
    Code:
    <script>
    var setContent;
    function populate(selID)
    {
    var sel = document.getElementById(selID).value;
     switch(sel) {
      case "1":
      setContent="Operators Included Details";
      break;
      case "2":
      setContent="Additional Operators";
      break;
     }
     document.getElementById("container").innerHTML = setContent;
    }
    </script>
    
    <select id="selMenu" name="features" onchange="populate(this.id)">
    <option selected>Select A Item</option>
    <option value="1">Operators Included</option>
    <option value="2">Additional Operators</option>
    </select>
    
    <br/>
    <br/>
    <br/>
    
    <div id="container">
    <!-- dynamically generated content here (based on select value) -->
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    17
    Rep Power
    0
    Thanks web_loone08, you have created a good solution to my problem, the result is I have created the following working table

    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>
    Now I was wondering if this could be improved upon baring in mind that there will be a total of 48 options producing 23 results each, 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.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    You would do it like this:
    Code:
    <script>
    var setContent;
    var content = ["Operators Included Details Here","Additional Operators Details Here","Mobile Chat Details Here","Visitor Chat Window Details Here","Multiple Website Details Here"];
    function populate(selID,val)
    {
    var sel = document.getElementById(selID).value;
     switch(sel) {
       case val:
       setContent = content[val-1];
       break;
     }
     document.getElementById("container").innerHTML = setContent;
    }
    </script>
    
    <select id="selMenu" name="features" onchange="populate(this.id,this.value)">
    <option selected>Select A Item</option>
    <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>
    
    <!-- add the rest of your options here, but be sure to add the text, that you want to display (for each option); in the "content" array -->
    
    </select>
    
    <br/>
    <br/>
    <br/>
    
    <div id="container">
    <!-- dynamically generated content here (based on select value) -->
    </div>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    17
    Rep Power
    0
    Thanks web_loone08, I think I have it sorted now. Your help has been invaluable.

IMN logo majestic logo threadwatch logo seochat tools logo