/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
May 03.2013

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>
[/CODE]

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERMay 04.2013 — 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!
Copy linkTweet thisAlerts:
@JMRKERMay 04.2013 — 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.
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; Untitled &lt;/title&gt;
&lt;style type="text/css"&gt;
.ag { text-align:right; }
.bg { color:white; background-color:red; font-weight:bold; font-size:1.2em; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form id="alive-chat" action="" method="post" onsubmit="return false"&gt; <br/>
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt; &lt;span class="bgthead" &gt;Vendor&lt;/span&gt; &lt;/th&gt;
&lt;th&gt; &lt;span class="bgthead" &gt;Product&lt;/span&gt; &lt;/th&gt;
&lt;th&gt;
&lt;span class="bgthead" &gt;
&lt;select name="features" onchange="alterColumn(this.selectedIndex)"&gt;
&lt;option value="1"&gt;Operators Included &lt;/option&gt;
&lt;option value="2"&gt;Additional Operators &lt;/option&gt;
&lt;option value="3"&gt;Mobile Chat &lt;/option&gt;
&lt;option value="4"&gt;Visitor Chat Window &lt;/option&gt;
&lt;option value="5"&gt;Multiple Website &lt;/option&gt;
&lt;/select&gt;
&lt;/span&gt;
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id="tblBody"&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Alive Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Lite&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Alive Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Pro&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Alive Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Pro+&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Zopim&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Lite&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Zopim &lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Zopim &lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Advanced&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Velaro&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Velaro&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Business&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Velaro&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Omni&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Comm 100&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Basic&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Comm 100&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Professional&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Comm 100&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Enterprise&lt;/td&gt;
&lt;td class="ag"&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Solo&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Team&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Chat&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Enterprise&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Zilla&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;One&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Zilla&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Pro&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Olark&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Bronze&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Olark&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Gold&lt;/td&gt;
&lt;td class="ag"&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Olark&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Platinum&lt;/td&gt;
&lt;td class="ag"&gt;8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Olark&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;Ultimate&lt;/td&gt;
&lt;td class="ag"&gt;15&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="alt"&gt;
&lt;td&gt; &lt;span class="bg" &gt;Whos On&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="ag"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; &lt;span class="bg" &gt;Live Help Now&lt;/span&gt; &lt;/td&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td class="ag"&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
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&lt;sel.length; i++) {
if (sel[i].className == 'ag') { sel[i].innerHTML = columnValues[grp][k]; k++; } <br/>
}
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@chris124authorMay 04.2013 — 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.
Copy linkTweet thisAlerts:
@JMRKERMay 04.2013 — 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.
Copy linkTweet thisAlerts:
@chris124authorMay 06.2013 — 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.
Copy linkTweet thisAlerts:
@JMRKERMay 06.2013 — 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.
Copy linkTweet thisAlerts:
@chris124authorMay 06.2013 — 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]
];
[/CODE]

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>
[/CODE]
Copy linkTweet thisAlerts:
@JMRKERMay 06.2013 — Put the yes, no and $4 into single quotes.

Example: 'yes', 'no', '$4'
Copy linkTweet thisAlerts:
@chris124authorMay 13.2013 — Thanks JMRKER
Copy linkTweet thisAlerts:
@chris124authorMay 13.2013 — This Thread is now closed
×

Success!

Help @chris124 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...