1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

put results from displayed in rows or columns

Discussion in 'JavaScript' started by macaela, Jul 8, 2011.

0
  1. #1
    Hi i have the a drop down list that depending on the user selection display the list of results
    for example if (select color) display (red, blue, pink)
    if select car display(ford,bentley,ferrari) and so on
    but now i am trying to put the result in a table each element to their own or column.
    this my code can easy be run on w3school site
    can someone help me please
    thanks in advance

    <HTML>
<HEAD>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function setup(ans) {
  lit = ''
  if (ans == 'color') {

    lit = lit + '<br/>blue<br/>'
    lit = lit + '<br/>red<br/>'
    lit = lit + '<br/>green<br/>'
    lit = lit + '<br/>pink<br/>'
    lit = lit + '<br/>yellow<br/>'
  }
  if (ans == 'number') {
    lit = lit + '<br/>one<br/>'
    lit = lit + '<br/>two<br/>'
    lit = lit + '<br/>three<br/>'
    lit = lit + '<br/>four<br/>'
    lit = lit + '<br/>five<br/>'

  }


 if (ans == 'car') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }
  document.getElementById('rep').innerHTML=lit
}
</SCRIPT>
</HEAD>
<BODY>

<FORM ACTION="#" NAME="quest">
<SELECT NAME="q1" ONCHANGE="setup(document.quest.q1.value)">
<OPTION VALUE="">- Please select -</OPTION>
<OPTION VALUE="color">Color</OPTION>
<OPTION VALUE="number">Number</OPTION>
<OPTION VALUE="cars">Cars</OPTION>
</SELECT>

<SPAN ID="rep"></SPAN>

</FORM>

</BODY>
</HTML>
    Code (markup):

     
    macaela, Jul 8, 2011 IP
  2. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Tables are made with <table>, <tr>, and <td>. w3schools will tell you all about them.
    You don't make tables with <br/> tags.. ;-)
     
    tolas, Jul 9, 2011 IP
  3. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Thanks i manage dto fixe the ussie but now i have another one from the code a i posted earlier it display date depending on what the user selection from the drop down but as the user open the page nothing shows so i wanted when the user opens the page to show the drop down but also one of the data options date as at moment i have

     if (ans == 'car') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }
    Code (markup):
    so i tried leave empty so when you open the page that list shows but still doesnt show
     if (ans == '') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }
    Code (markup):
    so how can i get to display one of the list from the drop down as you open the page then
     
    macaela, Jul 9, 2011 IP
  4. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    On the page as you have it now, your function won't even be called first time around.
    Try putting it as <body onload="setup('')">.
     
    tolas, Jul 9, 2011 IP
  5. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    i saw it before somewher is something like
    <code><option selected="value"></code>
     
    macaela, Jul 9, 2011 IP
  6. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    <select>
    <option selected value="v1">option 1 label</option>
    <option value="v2">option 2 label</option>
    </select>

    You'd probably need that "selected" too.
     
    tolas, Jul 9, 2011 IP
  7. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    so will i need both the onload and selected??
     
    macaela, Jul 9, 2011 IP
  8. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    yes i think so
     
    tolas, Jul 9, 2011 IP
  9. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9
    i have tried test one of the onload but it just makes the page blank like if i put that on my page
    <head>
    <script type="text/javascript">
        function OnLoadDocument () {
            document.write("The document has been .");

        }
    </script>
</head>
<body onload="OnLoadDocument ();">

<p>sdkuhfiosuhg</p>
</body>
    Code (markup):
    but all it does hes showing a black page with the document writen message i want to show my page as normal with the dropdown selected already
     
    macaela, Jul 9, 2011 IP
  10. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #10
    this my whole code you can run on w3school page acn you show me wher do i put that onload to just show one of the options for example
    onload
     lit = lit + '<br/>blue<br/>'
    lit = lit + '<br/>red<br/>'
    lit = lit + '<br/>green<br/>'
    lit = lit + '<br/>pink<br/>'
    lit = lit + '<br/>yellow<br/>'
    Code (markup):
    <HTML>
<HEAD>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function setup(ans) {
  lit = ''
  if (ans == 'color') {

    lit = lit + '<br/>blue<br/>'
    lit = lit + '<br/>red<br/>'
    lit = lit + '<br/>green<br/>'
    lit = lit + '<br/>pink<br/>'
    lit = lit + '<br/>yellow<br/>'
  }
  if (ans == 'number') {
    lit = lit + '<br/>one<br/>'
    lit = lit + '<br/>two<br/>'
    lit = lit + '<br/>three<br/>'
    lit = lit + '<br/>four<br/>'
    lit = lit + '<br/>five<br/>'

  }



 if (ans == 'car') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }

 if (ans == '') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }


  document.getElementById('rep').innerHTML=lit
}



</SCRIPT>
</HEAD>
<BODY>

<FORM ACTION="#" NAME="quest">
<SELECT NAME="q1" ONCHANGE="setup(document.quest.q1.value)">
<OPTION VALUE="">- Please select -</OPTION>
<OPTION VALUE="color">Color</OPTION>
<OPTION VALUE="number">Number</OPTION>
<OPTION VALUE="cars">Cars</OPTION>
</SELECT>

<SPAN ID="rep"></SPAN>

</FORM>

</BODY>
</HTML>
    Code (markup):
     
    macaela, Jul 9, 2011 IP
  11. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    you shouldn't use document.write in onLoadDocument() i think..
    just call setup() from <body onload=>
     
    tolas, Jul 9, 2011 IP
  12. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #12
    thank this what i did i just inserted this
    <body onload="setup('color')">
    it works when i run but on dreaweaver shows a sintax error warning even thou it the code runs so i'm i missing something to end the sintax propely or something?
     
    macaela, Jul 9, 2011 IP
  13. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    you can ignore any dreamweaver syntax errors if it works in the browser ;)
     
    tolas, Jul 9, 2011 IP
  14. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #14
    are you sure i dnt have to drop it somewher because i just put it
    like this i am not suppost to put inside the javascript tags or anythinge else?

    <body>
    <body onload="setup('color')">

    </body>
     
    macaela, Jul 9, 2011 IP
  15. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #15
    ok is working now just one browser issue i manage to get on a table but now the table shows on firefox but not on chrome this how it look with tables tag
    you can just run the code on w3school

    <HTML>
<HEAD>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
function setup(ans) {
  lit = ''
  if (ans == 'color') {

    lit = lit + '<tr bgcolor="#FF0000"><td>green</td></tr>'
    lit = lit + '<tr bgcolor="#FF0000"><td>pink</td></tr>'
    lit = lit + '<tr bgcolor="#FF0000"><td>yellow</td></tr>'
  }
  if (ans == 'number') {
   lit = lit + '<tr bgcolor="#FF0000"><td>green</td></tr>'
    lit = lit + '<tr bgcolor="#FF0000"><td>pink</td></tr>'
    lit = lit + '<tr bgcolor="#FF0000"><td>yellow</td></tr>'
	
	
//	
	
 lit = lit + '<tr  style="cursor: pointer; cursor: hand;" onClick="jwplayer().load({\'file\': \'hofbell30732_SD.mp4\', \'hd.file\': \'videos/film.mp4\'})"><td rowspan="4"><img src="images/generic-nice-house-w236h150q90c1.jpg" width="100" height="100" alt="house" /></td><td>Stairfoot Close</td></tr><tr><td>Adel</td></tr><tr><td>LS16</td></tr><tr><td>£895,000</td></tr>'
 
 lit = lit + '<tr><td rowspan="4"><img src="images/generic-nice-house-w236h150q90c1.jpg" width="100" height="100" alt="house" /></td><td>Stairfoot Close</td> </tr> <tr> <td>Adel</td></tr> <tr><td>LS16</td></tr><tr><td>£895,000</td></tr>'
 
 lit = lit + '<tr><td rowspan="4"><img src="images/generic-nice-house-w236h150q90c1.jpg" width="100" height="100" alt="house" /></td><td>Stairfoot Close</td> </tr> <tr> <td>Adel</td></tr> <tr><td>LS16</td></tr><tr><td>£895,000</td></tr>'
 
lit = lit + '<a href="#" onClick="jwplayer().load({\'file\': \'hofbell30732_SD.mp4\', \'hd.file\': \'videos/film.mp4\'})">orange</a>'
 
  lit = lit + '<a href="manningsvideos.html"><img src="images/generic-nice-house-w236h150q90c1.jpg" width="100" height="100" alt="house" /></a>'
  }
  
   if (ans == 'cars') {
    lit= lit + '<tr><td>ferrari</td></tr>'  
    lit= lit + '<tr><td>bentley</td></tr>'
    lit= lit + '<tr><td>ford</td></tr>'
    lit= lit + '<tr><td>mustang</td></tr>'
  }
  
  
   if (ans == '') {
    lit = lit + '<br/>ferrari<br/>'  
    lit = lit + '<br/>bentley<br/>'
    lit = lit + '<br/>ford<br/>'
    lit = lit + '<br/>mustang<br/>'

  }
  
  
  document.getElementById('rep').innerHTML=lit
  
}


</SCRIPT>
</HEAD>
<BODY>
 
<FORM ACTION="#" NAME="quest">
<SELECT NAME="q1" ONCHANGE="setup(document.quest.q1.value)">
<OPTION VALUE="">- Please select -</OPTION>
<OPTION VALUE="color">Color</OPTION>
<OPTION VALUE="number">Number</OPTION>
<OPTION VALUE="cars">Cars</OPTION>
</SELECT>
 
  <table class="table_manning"  cellspacing="0">
<tr id="rep">


</tr>
</table>
 
</FORM>
 
</BODY>
</HTML>
    Code (markup):
     
    macaela, Jul 9, 2011 IP
  16. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    you should do <table id="rep"..> not <tr id="rep"> in your HTML code.. then it'll work probably.
     
    tolas, Jul 9, 2011 IP
  17. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #17
    yeah but i already have the start of the table

    <table class="table_manning"  cellspacing="0">
<tr id="rep">


</tr>
</table>
    Code (markup):
    so do i delete the
    <table class="table_manning" cellspacing="0">
    to just
    table id="rep"..>
    but if so my ways works on firefox safari except chrome instead of showing all in one collumn with different rows like on the others in chrome show as various columns
     
    macaela, Jul 9, 2011 IP
  18. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    if you want 2 columns or more, put multiple <td></td> between a single <tr></tr>.
     
    tolas, Jul 9, 2011 IP
  19. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #19
    i did what you told me earlier removed the
    <tr id="rep">
    and replaced with
    <table id="rep"..>
    works on chrome now
    thank you very much for your help thank you very much;)
     
    macaela, Jul 9, 2011 IP