creating a table from a dropdown box option values

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Asif03
    New Member
    • Oct 2019
    • 1
    #1

    creating a table from a dropdown box option values

    Hi

    I'm trying to show a table based on what choice is made from a drop down box.the table will have two columns and
    the selected value of the table will be the number of rows of the table with additional row for heading of tables

    Code:
    <select name="dropdown" size="1">
<option selected value="">Please make a selection</option>
<option value="10">Choice 10</option>
<option value="8">Choice 8</option>
<option value="4">Choice 4</option>

</select>
    i.e. if Choice 4 is selected I'd like to display a new <tr> with the
    following:

    Code:
    <tr>
<th> Flat No.</th>
<th>  Floor No.</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>

    the values of the table will be saved in database after submit.
    I want to do this only by using javascript and html and simply but can't achieve what I'm looking for.
    Last edited by gits; Oct 30 '19, 07:35 AM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      what have you done so far to implement a solution?

        Comment

        • AjayGohil
          New Member
          • Apr 2019
          • 83
          #3
          You can try below code:

          Code:
          <!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
      <select name="dropdown"  id="select1" size="1">
        <option selected value="">Please make a selection</option>
        <option value="10">Choice 10</option>
        <option value="8">Choice 8</option>
        <option value="4">Choice 4</option>
         
        </select>
        <div  id="table"></div>
       
       <input type="button"  id="select" value="submit" onclick="change()"/>
      <script type="text/javascript">
       
      function change() {
        var ans = document.querySelector('#select1');
        var result=ans.value;
     
        document.getElementById("table").innerHTML=get_row(result);
        
        
      }
      function get_row(result)
      {
          var html='<table border="1" height="200px" width="200px">'+
                    '<tr><th> Flat No.</th>'+
                     '<th>  Floor No.</th>'+
                      '</tr>';
          for (let i = 0; i < result ; i++) {
              html=html+'<tr><td></td><td></td></tr>'
               }
               return html;
      }
      </script>
      
</body>
</html>

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              since the thread was dug out of last year - in case anyone wants to use that shown code - there are some things to be commented:

              1. decide whether and when to use var, let const keywords and not mixing them up somehow randomly - just because something works its not always the case its the right way - you could even leave out the variable declarations in that example at all and it would still work - but that would be even worse code then

              2. the 1st option in the select-node should be handled differently since it wouldn't make sense to create a table without any row in it

              3. using any layout-related properties in html like border, width, height should always be avoided since that should be done by css

              overall: don't copy paste code from somewhere into your application - always use it as an example only, understand what is done there and what might be wrong or right. Know what you are doing instead of being just another 'Scriptkiddie'.

                Comment

                Previous template Next
                Working...