How to dynamically "Add Row" or "Add Column" functionality using JS?

[dennis-fedco]

I want to create functionality where user can enter some data.  Each data is a set of 6 variables. 

I want to make the number of columns dynamic and start off with a single column and make multiple columns via for example an "Add Column" button.
 

I have started trying this concept with columns (https://jsfiddle.net/dennisfedco/vfhc1jma/5/)

Or, if it makes things simpler, I can do rows.

 

But initially, user sees 6 input boxes.  Enters values.  Then clicks "add new set" which shows 6 more input boxes (via column or row) and enters new values.  Then user can select one of the column/row as "main" and submit.

 

How can I do this with least amount of trouble?

My goal is to make it solid and easy to debug if there is trouble, so I would like to avoid things like AJAX or making it too dynamic or too breakable.

 

In short in my example there are 4 columns now.  But I want to make it just one, and have user add more if needed.

Edited August 11, 2015 by dennis-fedco

[mac_gyver]

it will be easiest if you add rows.

 

if you weren't using a <table> for your layout, this would be simple. you could just define a template section around the first instance of a row, then dynamically append new instances -

<script type="text/javascript">

function dyn_add()
{
    // create an empty div element
    var div1 = document.createElement('div');

    // get the template html and put it into the empty div
    div1.innerHTML = document.getElementById('template').innerHTML;

    // append the new div to the target area on the page
    document.getElementById('add_here').appendChild(div1);
}
</script>

<p>  
    <a href="javascript:dyn_add()">Dynamically Add another of whatever is defined in the template div</a>  
</p>

<form method='post' action='formaction.php'>

<!-- Template. This first instance of "whatever" will be appended in the add_here div -->  
<div id="template">
<?php
// produce the first row/instance
$fields = array('Quantity 1','Pressure','Vacuum','Quantity 4','Temp','Solids');
$temp = "";
foreach($fields as $element){
    $temp .= "<input name='{$element}[]' size='3' type='text'>";
}
$temp .= "<br>";
echo $temp; // output the first instance in the template div
?>
</div>

<!-- if you want to have more initial fields shown, output them here, after the template -->
<?php echo str_repeat($temp, 3); ?>

<!-- container to hold the dynamically added instances of "whatever" -->
<div id="add_here">
</div>
 
<input type='submit'>
</form>

however, this won't work with a <table> as you cannot put a <div> directly into a table.

 

afaik, with a table, to append rows or columns, you would need to specifically build rows and cells where you want them and then append whatever html you want into each new cell. if you search the web for "javascript dynamically add table rows" you will find a ton examples.

 

you could of course do this server-side using php to add any requested rows/columns to the html.
 

[dennis-fedco]

alright.  I can use DIVs and not tables.  Maybe even if I do that, my life will be easier (i.e. maybe I won't have to use tabindex and such to force table to behave my way), and maybe I can choose either row or column implementation this way.

What you have is promising I am going to try a few more things to make sure.  My goal is basically:

• keep HTML simple (right now my HTML is not simple, with tabindexes and all)
• keep logic simple (same -- right now I have to deal with a mess of indexes and mapping them to proper columns)
• a new one -- being able to save the form (via AJAX), and restore the form (say I have 10 data sets, I don't want to reenter them all if I need to make a change)

One way to implement that I have seen is to use AJAX to add one row at a time.  So at any one time you effectively have only one form-column to deal with and you generate that form in the back and load it via AJAX.

 

ehh there's gotta be a library for this.  I am more "back-end" PHP wiz ...