Recently, whilst working on an ASP.NET project, I had the requirement to dynamically add rows and columns to any position within a HTML table. This turned out to be a little more complicated than I had hoped as adding rows or columns into the middle of the table is slightly trickier, but it’s easily achievable with a little bit of effort.

Fortunately, with some help from jquery and the html 5 data attributes it’s not difficult to insert a new row or column at any position within the table. The only caveat with my method is that it requires the table to start with the correct attributes, so we can select them with jquery.

Format the table

The first step is to ensure that all rows and cells in the table have data attributes that define their position in the table. You will need to use html5 data attributes to do this. In my examples I have used data-row for the row number and data-col for the column number. This allows me to quickly identify the position of the cell.

<table id="myTable"  border="1" style="width:150px; height:150px">
            <tr data-row="0">
                <td data-row="0" data-col="0"> </td>
                <td data-row="0" data-col="1"> </td>
                <td data-row="0" data-col="2"> </td>
                <td data-row="0" data-col="3"> </td>
            </tr>
            <tr data-row="1">
                <td data-row="1" data-col="0"> </td>
                <td data-row="1" data-col="1"> </td>
                <td data-row="1" data-col="2"> </td>
                <td data-row="1" data-col="3"> </td>
            </tr>
            <tr data-row="2">
                <td data-row="2" data-col="0"> </td>
                <td data-row="2" data-col="1"> </td>
                <td data-row="2" data-col="2"> </td>
                <td data-row="2" data-col="3"> </td>
            </tr>
            <tr data-row="3">
                <td data-row="3" data-col="0"> </td>
                <td data-row="3" data-col="1"> </td>
                <td data-row="3" data-col="2"> </td>
                <td data-row="3" data-col="3"> </td>
            </tr>
    </table>

Adding a row

To add a row, we will need to change the data-row values for all rows below the insertion point (i.e. if we insert a new row before the 3rd row, the old 3rd row will now be the 4th). To do this we will loop through all cells and increment the data-row value. This will not change the layout of the table, but ensure that the attribute number remains correct after we insert row(s) above.

This is done by using jquery to find all the items with a data-row attribute and then the value of data-row is incremented ( +1 for adding, -1 for deleting).

function myTable_IncrimentRowIdNumber(startPosition, increment) {
            //get all the items with the data-row attr. - this will include tr and td
            var items = $('[data-row]');

            //for each item with a data-row attr. increment the value
            for (i = 0; i < items.length; i++) {
                //get the current value
                var rowNum = parseInt(items.eq(i).attr('data-row'));

                //only update the rows that are after the new inserted row
                if (rowNum >= startPosition) {
                    //generate the new value and update the item
                    var newId = rowNum + parseInt(increment);
                    items.eq(i).attr('data-row', newId);
                }
            }
        }

The next step is to append the new row into the table. This is done by using the jquery after function to place the row’s html after the previous tr. A loop is used to generate each table cell inside the row. Note that this sets the new data attribute values, If you wish to also set content or classes, you could use a function here to generate the correct content.

function AddNewRow(row) {
            //using jquery, grab a reference to the html table
            var myTable = $('#myTable');
            //get the number of rows and columns
            var colCount = myTable.find('td[data-row=0]').length;
            var rowCount = $("#myTable tr").length;

            //incriment position numbers to make room for the new row
            //this is required to keep things working after we change the table
            myTable_IncrimentRowIdNumber(row, 1);

            //add row
            var newRow = '<tr data-row="' + row + '">';
            //add cells into the row
            for (addCol = 0; addCol < colCount; addCol++) {
                newRow += '<td data-row="'+ row +'" data-col="' +addCol+ '"> </td>';
            }
            //close the row
            newRow += '</tr>';
            //add the new row after the previous row in the table - the magic of jquery :)
            $(newRow).insertAfter('tr[data-row=' + (parseInt(row) - 1) + ']');
        }

Adding a column

Adding a new column into the table follows the same logic, however it is slightly different. Similar to adding a row, we will increment the data-col value, we will generate the new column by inserting a new cell in the correct on each row, using jquery to find the previous cell and add a new cell after.

function AddNewCol(colNum)
        {
            var myTable = $('#myTable');
            var colCount = myTable.find('td[data-row=0]').length;
            var rowCount = $("#myTable tr").length;

            //incriment id numbers to make room for the new column
            myTable_IncrimentColIdNumber(colNum, 1);

            //add new column by adding a new cell to each row
            for (row = 0; row < rowCount; row++) {
                //add a new cell after the cell for the previous column
                $('td[data-row=' + row + '][data-col=' + (parseInt(colNum)-1) + ']').after('<td data-row="'+ row +'" data-col="' +colNum+ '"> </td>');
            }
        }

function myTable_IncrimentColIdNumber(startPosition, increment) {

            //increment column id's
            var cells = $('td[data-col]');

            //foreach cell
            for (i = 0; i < cells.length ; i++) {

                var colNum = parseInt(cells.eq(i).attr('data-col'));

                //for every column beyond the insertion point, increment the column number
                if (colNum >= startPosition) {
                    var newId = colNum + parseInt(increment);
                    cells.eq(i).attr('data-col', newId);
                }
            }
        }

Deleting rows and columns

We can also delete rows and columns. To delete a row, we find the tr with the matching data-row value and instruct jquery to remove it. For columns, we use jquery to find all cells with the matching data-col value and delete all matching items.

        function myTable_DelRow(row) {
            $('tr[data-row=' + row + ']').remove();

            myTable_IncrimentRowIdNumber(row, -1);
        }

        function myTable_DelCol(col) {
            $('td[data-col=' + parseInt(col) + ']').remove();
            myTable_IncrimentColIdNumber(col, -1);
        }

Finally, here is a demo of everything put together. Note that my code samples only show the basic method, it can be extended to include key rows/columns that cannot be added or removed. You will also see that you cannot insert at the beginning of the table, as I have used the after method, which obviously requires that there is a previous matching element, but you can code around this to suit your own needs.

Use the below buttons to add or delete rows and columns. All positions are 0 indexed.
Add row at:
Add col at:
Delete row at:
Delete col at: