Add/Delete HTML table elements dynamically

by Sunny Mody

HTML

<p>
<input type="button" id="addRow" value="Add Row">
<input type="button" id="deleteRow" value="Delete Row">
<table id="rowTable" width="350px" border="1">
	<tr>
		<td>Original Row</td>		
	</tr>
</table>
</p>
<p>
<input type="button" id="addCol" value="Add Column">
<input type="button" id="delCol" value="Delete Column">
<table id="colTable" width="350px" border="1">
	<tr>
		<td>Original Column</td>		
	</tr>
</table>
</p>

JavaScript

$('#addRow').click( function() {      
	var tableID = "rowTable";
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	
	var element1 = "<td>New Row</td>";
	row.innerHTML = element1;	
}); 

$('#deleteRow').click( function() {		
		var tableID = "rowTable";
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		console.log(rowCount);
		if(rowCount != 1) {			
			rowCount = rowCount - 1;
			table.deleteRow(rowCount);
		}			
}); 

$('#addCol').click( function() {  
	var tableID = "colTable";
	var tblBodyObj = document.getElementById(tableID).tBodies[0];
	for (var i=0; i<tblBodyObj.rows.length; i++) {
		var newCell = tblBodyObj.rows[i].insertCell(-1);
		newCell.innerHTML = "New Column"
	}
});
$('#delCol').click( function() {  
	var tableID = "colTable";
	var allRows = document.getElementById(tableID).rows;
	for (var i=0; i<allRows.length; i++) {
		if (allRows[i].cells.length > 1) {
			allRows[i].deleteCell(-1);
		}
	}
});