Manipulating Tables

Contact Us or call 1-877-932-8228
Manipulating Tables

Manipulating Tables

HTML tables can be created and manipulated dynamically with JavaScript. Each table element contains a rows array and methods for inserting and deleting rows: insertRow() and deleteRow(). Each tr element contains a cells array and methods for inserting and deleting cells: insertCell() and deleteCell(). The following example shows how these objects can be used to dynamically create HTML tables:

Code Sample:

DynamicHtml/Demos/Table.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Manipulating Tables</title>
<link href="table.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
function addRow(tableId, cells){
	var tableElem = document.getElementById(tableId);
	var newRow = tableElem.insertRow(tableElem.rows.length);
	var newCell;
	for (var i = 0; i < cells.length; i++) {
		newCell = newRow.insertCell(newRow.cells.length);
		newCell.innerHTML = cells[i];
	}
	return newRow;
}

function deleteRow(tableId, rowNumber){
	var tableElem = document.getElementById(tableId);
	if (rowNumber > 0 && rowNumber < tableElem.rows.length) {
		tableElem.deleteRow(rowNumber);
	} else {
		alert("Failed");
	}
}

observeEvent(window,"load",function() {
	var btnAdd = document.getElementById("btnAdd");
	var btnDelete = document.getElementById("btnDelete");
	observeEvent(btnAdd,"click",function() {
		var cells=[btnAdd.form.FirstName.value,btnAdd.form.LastName.value];
		addRow('tblPeople', cells);
	});
	observeEvent(btnDelete,"click",function() {
		deleteRow('tblPeople', btnDelete.form.RowNum.value)
	});
});
</script>
</head>
<body>
<table id="tblPeople">
<tr>
	<th>First Name</th>
	<th>Last Name</th>
</tr>
</table>
<hr>
<form name="formName">
	<label for="FirstName">First Name:</label>
	<input type="text" name="FirstName"><br>
	<label for="LastName">Last Name:</label>
	<input type="text" name="LastName"><br>
	<input type="button" id="btnAdd" value="Add Name">
	<hr>
	<label for="RowNum">Remove Row:</label>
	<input type="text" size="1" name="RowNum">
	<input type="button" id="btnDelete" value="Delete Row">
</form>
</body>
</html>

The body of the page contains a table with an id of tblPeople. The table contains a single row of headers.

<table id="tblPeople">
		<tr>
		<th>First Name</th>
		<th>Last Name</th>
		</tr>
		</table>

Below the table is a form that allows the user to enter a first and last name. When the "Add Name" button is clicked, the addRow() function is called and passed in the id of the table (tblPeople) and a new array containing the user-entered values:

observeEvent(btnAdd,"click",function() {
	var cells = [btnAdd.form.FirstName.value, btnAdd.form.LastName.value];
	addRow('tblPeople', cells);
});

The addRow() function uses the insertRow() method of the table to add a new row at the end of the table and then loops through the passed-in array, creating and populating one cell for each item. The function also returns the new row. Although the returned value isn't used in this example, it can be useful if you then want to manipulate the new row further. This function is included in our lib.js file.

function addRow(tableId, cells){
	var tableElem = document.getElementById(tableId);
	var newRow = tableElem.insertRow(tableElem.rows.length);
	var newCell;
	for (var i = 0; i < cells.length; i++) {
		newCell = newRow.insertCell(newRow.cells.length);
		newCell.innerHTML = cells[i];
	}
	return newRow;
}

The form also contains a "Delete Row" button that, when clicked, passes the id of the table (tblPeople) and the number entered by the user in the RowNum text field.

observeEvent(btnDelete,"click",function() {
	deleteRow('tblPeople', btnDelete.form.RowNum.value)
}); 

The deleteRow() function checks to see if the row specified exists and is not the first row (row 0, which is the header row). If both conditions are true, it deletes the row. Otherwise, it alerts "Failed".

function deleteRow(tableId, rowNumber){
	var tableElem = document.getElementById(tableId);
	if (rowNumber > 0 && rowNumber < tableElem.rows.length) {
		tableElem.deleteRow(rowNumber);
	} else {
		alert("Failed");
	}
}
Next