In the following function, we add a column to the table specified by the function parameter 'table'. A new column is created by adding a 'TD' to the end of each 'TR' in the table. Or in other words, by adding a cell to the end of each existing row, a new column will created. Notice that the first cell is a 'TH' element that contains a button used to delete the column.

function addCol(table){
	var table = document.getElementById(table);	
	var th = document.createElement('th');
	th.innerHTML = "<input type='button' value='X' onclick=\"deleteCol(this);\">";	
	table.rows[0].appendChild(th);
	for(i=1; i<table.rows.length; i++){
		var td = document.createElement('td');
		td.innerHTML = "<input type='text' size='1'>";
		table.rows[i].appendChild(td);
	}
}

In the next function we add a row to the table specified by the function parameter 'table'. A new row is created by adding a 'TR' element to the table and giving it a number of 'TD' elements equal to the current number of columns. Basically, adding a new row and making sure it has the correct number of cells. Like the last function, the first cell will be a 'TH' element that holds a button to delete the row.

function addRow(table){
	var table = document.getElementById(table);
	var firstRow = table.rows[0];
	var row = document.createElement('tr');
	var th = document.createElement('th');
	th.innerHTML = "<input type='button' value='X' onclick=\"deleteRow(this);\">";
	row.appendChild(th);
	for(i=1; i<firstRow.cells.length; i++){
		var td = document.createElement('td');
		td.innerHTML = "<input type='text' size='1'>";
		row.appendChild(td);	
	}
	table.tBodies[0].appendChild(row);
}

To delete a column, we first get a reference to the table, and the cell from which the delete button was clicked. This is accomplished by accessing the parentNode's of the button, which is passed into the function. Next, we use our getPosition function (explained later) to get the array position of the cell. We can now delete the column by removing from each row, the cell that shares the array position of the delete button's cell.

function deleteCol(id){
	var table = id.parentNode.parentNode.parentNode;
	var td = id.parentNode;	
	position = getPosition(table,td);
	for(i=0; i<table.rows.length; i++){
		removeTd = table.rows[i].cells[position['col']];
		table.rows[i].removeChild(removeTd);
	}
}

Deleting a row is a little bit easier. First, we get the array position of the cell from which the delete button was clicked. We can then delete the entire row that exists at that same row location.

function deleteRow(id){
	var table = id.parentNode.parentNode.parentNode;
	var td = id.parentNode;
	position = getPosition(table,td);
	removeTr = table.rows[position['row']];
	table.removeChild(removeTr);
}

The getPosition function works by iterating through each row and column in the table. While iterating, the function checks each cell to see if it matches the cell provided in the function parameters. Once a match is found, an array is created that records the row and column positions of the matched cell. The position array is then returned.

function getPosition(table,td){
	for(i=0; i<table.rows.length; i++){	
		for(j=0; j<table.rows[i].cells.length; j++){
			if(table.rows[i].cells[j] == td){
				var position = new Array();
				position['row'] = i;
				position['col'] = j;
				return position;
			}
		}
	}
}

To get this started you just need a table. Notice that each cell also contains an input box that could be used to input and store data.