User login

Insert A Row In The HTML Table Dynamically

Try it here:

Add A Row By Clicking Here

Test row 1


Here is the code:

function addRow(table)
{
		//get number of rows
		var rowNum = table.getElementsByTagName("TR").length;
		rowNum++;

		var newRow = document.createElement("tr");
		var newCol = document.createElement("td");
		var newTxt = document.createTextNode("Test row " + rowNum);

		newCol.appendChild(newTxt);
		newRow.appendChild(newCol);
		// appends it to the first tbody element
		table.getElementsByTagName("tbody")[0].appendChild(newRow);
}

Remove Table Rows Dynamically

It's very easy to remove rows from an existing table. We'll use a DHTML method deleteRow().

Add A Row By Clicking Here

Delete A Row By Clicking Here

Test row 1

Here is the function that deletes the last row:

function delRow(table){
	len = table.rows.length;
	table.deleteRow(len-1);
}

You might be interested in another article that shows how to remove selected rows.

Comments

good

good