Dynamically add columns to html table and sending input to database

Question

I have a table in an HTML form in which the total columns depends on the user. The additional columns are added with a button click. The rows that come with the added columns are supposed to be array inputs which will be sent to MySQL database once the form is submitted.

I am new at javascript and jquery. I did some search on the internet and found a lot of 'creating HTML tables with dynamic rows/columns' related stuff but none of them were related to having input cells in the rows that came with the dynamic columns and sending them to the database.

I came across this link that gave me a headstart but I am stuck: Dynamic columns - Stack Overflow

In the image above, the columns 'Bus1 kW' etc. are added when a button is clicked, including the button in the screenshot would just make the image unnecessarily longer. The rows to all added columns are supposed to be input fields, the reason I can change the value of those fields is that I enabled 'content editable'. I tried adding input fields that are arrays but when I do so the button that adds columns stops working.

How do I make the rows that come with the dynamic columns to have input fields as arrays so that I can access them in PHP? How do I add this: <input type="text" required="required" name="Bus1_kW[]"> to the rows that come with the dynamic columns in such a way that all rows for column lets say 'Bus1 kW' are stored in an array that I can access in PHP when I submit the form?

Here is the script code that is producing the image above (jquery):

<script type="text/javascript"> 

            var i = 1;
      
       // This part works fine  
       $("#addColumn").click(function () {
            
                $("tr:first").append("<td>Bus"+i+" kW</td>");
                $("tr:not(:first)").append("<td contenteditable="+true+"> </td>");
            
            i = i+1;
        });            
        
        
    </script>

This is what I tried to do but it's not working:

<script type="text/javascript"> 

            var i = 1;

        // This is what I tried to do but it's not working
        $("#addColumn").click(function () {
            
                $("tr:first").append("<td>Bus"+i+" kW</td>");
                $("tr:not(:first)").append("<input type="+text+" required="+required+" name="+"Bus"+i+"_kW[]"+">");
            
            i = i+1;
        });
        
        
    </script>

This is the table inside the HTML form:

<table id="busDataTable" class="form-group-sm" border="1">
                                            <tbody>
                                                <tr>
                                                    <th>Interval Number</th>
                                                    <th>Time Interval (30min)</th>
                                                </tr>
                                                <tr> <td>1</td> <td>0</td> </tr> <!-- --> 
                                                <tr> <td>2</td> <td>0.5</td> </tr> <!-- --> 
                                                <tr> <td>3</td> <td>1</td> </tr> <!-- --> 
                                                <tr> <td>4</td> <td>1.5</td> </tr> <!-- -->
                                                <!-- Table rows continue until 48 rows --> 
                                                
                                            </tbody> <button id="addColumn">Add Column</button>
                                        </table>

I would appreciate any solution/help, jquery or javascript, I just barely got into javascript and do not know which would be preferred and why between javascript and jquery. Thank you for your time

matthias_h · Accepted Answer · 2020-06-20 18:38:08Z

2

The button to add rows shouldn't be between the closing tags </tbody> and </table> as this is invalid HTML. I just moved it before the table. I adjusted the append() function by adding a surrounding <td> for the input field and moving all static content (text and required) to the correct place as text and required are no variables.

   var i = 1;

   $("#addColumn").click(function() {
     $("tr:first").append("<td>Bus" + i + " kW</td>");
     $("tr:not(:first)").append("<td><input type='text' required='required' name='Bus" + i + "_kW[]'></td>");
     i = i + 1;        
   });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addColumn">Add Column</button>
<table id="busDataTable" class="form-group-sm" border="1">
  <tbody>
    <tr>
      <th>Interval Number</th>
      <th>Time Interval (30min)</th>
    </tr>
    <tr>
      <td>1</td>
      <td>0</td>
    </tr> <!-- -->
    <tr>
      <td>2</td>
      <td>0.5</td>
    </tr> <!-- -->
    <tr>
      <td>3</td>
      <td>1</td>
    </tr> <!-- -->
    <tr>
      <td>4</td>
      <td>1.5</td>
    </tr> <!-- -->
    <!-- Table rows continue until 48 rows -->

  </tbody> 
</table>

edited Jun 20, 2020 at 18:38

answered Jun 20, 2020 at 15:16

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ITM7 Over a year ago

Thank you very much. I just noticed that you mistakenly placed the i = i + 1; inside the for each function, I tried placing it outside and the numbering of the columns worked fine. I will now try writing the PHP code

matthias_h Over a year ago

@ITM7 I did it on purpuse because I thought that you would want the i to increment with each row which you obviously don't want. I adjusted my answer accordingly.

ITM7 Over a year ago

Thanks a lot, @matthias_h. I just tested retrieving the input data in PHP and it's working fine, just what I was looking for.

matthias_h Over a year ago

@ITM7 Glad that I was able to help :)

Collectives™ on Stack Overflow

Dynamically add columns to html table and sending input to database

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related