Dynamically add columns to html table and sending input to database

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

Answer

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>

Advertisement

Answer