How to add new table rows and columns with table headers to CSS table

Question

I have the following table format and would like to be able to add new columns and new rows based on user inputs.

The clickable part of the document basically consists of a list of names that will be the far left item of each row. Additionally there is a second clickable area that should add elements horizontally to each row adding a table header as it adds a new column.

For example:

List of names: [Jeff] [bill] [fred] [jake]

List of items to be added to each column: [apples] [oranges] [cars] [shoes]

If Jeff and bill were selected and apples and oranges were selected the table should be updated to look as such.

[Name] [apples] [oranges]
[jeff] [      ] [       ]
[bill] [      ] [       ]

If then another item was selected it would look as such

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]

Additionally if another name was selected at this point it should look as such

[Name] [apples] [oranges] [shoes]
[jeff] [      ] [       ] [     ]
[bill] [      ] [       ] [     ]
[fred] [      ] [       ] [     ]

This is what the html structure looks like:

<form>
    <div id="opTable"> 
        <div class="thead">
            <div class="th first">
                Name
            </div>
            <div class="th">
                clase
            </div>
            <div class="th">
                gold
            </div>
        </div>
        <div class="tbody"> 
            <div class="tr"> 
                <div class="td first">
                    Billy
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
                <div class="td">
                    <input type="text" style="width:100px"/>
                </div>
            </div>
        </div>
    </div>
</form>

Additionally, the code should be able to remove a name and or item in the same ways. I hope my question is clear enough.

Answer 1

If what you want to display clearly is a table, then I would suggest to also use a table for the markup.

This will also make rendering the markup as a table a lot easier :) By using a table, displaying the columns next to each other will be an inherent feature. No CSS trickery needed.

Adding another row will become (I use DOM API here because it's more performant than appending strings if your table gets large)

//Assuming each row has the same nr of columns
var numcols = $('#opTable tr:eq(0) td').length;
var row = document.createElement('tr');

//Insert name
var name_td = document.createElement('td');
row.appendChild(name_td);
name_td.appendChild(document.createTextNode(name));

//fill the rest with empty td's
for (var i=1; i < numcols; i++) {
    row.appendChild(document.createElement('td'));
}

$('#opTable').append(row);

Adding a column means doing something very similar, the difference is just that you append a <td> to each <tr>:

$('#opTable').find('tr').each(function(i) {
    if (i == 0) {
       $(this).append('<td>' + item + '</td>');  
    }
    else {
        $(this).append('<td/>');
    }
});