Adding Rows to a Table

[zeeshanhashmi]

Hello

i have a table that has 20 columns. I have a form for that, that fills the database through AJAX / PHP and then I want that a NEW ROW to be added on the table and start showing it in the same page without page load.

Please guide how i can add ROWS to a TABLE through Java script.
I googled it, and found this http://www.mredkj.com/tutorials/tableaddrow.html

but this is for 2 cells only, I have 20 cells in a ROW.

Please help

[Ize]

It can be easily done by using an array:

function addRow (cells, table) {
  var tr = document.createElement ('tr');
  for (var i=0,cell_length=cells.length; i<cell_length; i++) {
    var td = document.createElement ('td');
    td.appendChild (document.createTextNode (cells[i]));
    tr.appendChild (td);
  }
  table.appendChild (tr);
}
 
var theTable = document.getElementById ('myTable');
var cells = ['foo','bar','baz',1,2,3,true,false];
addRow (cells, theTable);

Let me know how that works out, it should be easy to customize.

[zeeshanhashmi]

wow, thanks a lot for your help. With your example, how a row can be DELETED ? and How Can I assign CSS Class to a CELL ?

[zeeshanhashmi]

can I do this like this ?

var td = document.createElement ('td');
    td.appendChild (document.createTextNode (cells[i]));
    td.className = 'my_CSS_Class_Name_Here'
    tr.appendChild (td);

please help

[paul_wilkins]

There is a very nice piece of code called the DOM Builder that can be used to easily create page elements.

DomBuilder.apply(window);
tr.appendChild(TD({'class': 'my_CSS_Class_Name_Here'}, cells[i]));

[Ize]

can I do this like this ?

var td = document.createElement ('td');
    td.appendChild (document.createTextNode (cells[i]));
    td.className = 'my_CSS_Class_Name_Here'
    tr.appendChild (td);

please help

Yes, that would be possible
Removing a row can be done in a lot of different ways, the easiest probably being by row-number. Something like this:

function deleteRow (rowNumber, table) {
  var trs = table.getElementsByTagName ('tr');
  table.removeChild (trs[rowNumber]);
}
 
// note that the first row starts at 0
// the following code will delete the second row:
deleteRow (1, myTable);

[zeeshanhashmi]

Thanks a lot to you all, you people are all great !

Now please let me know how I can assign CLASS to a newly created TD and how to assign a NAME and ID to it ?

Thanks

[PragyaRatna]

hi, you might want to see this article http://developer.mozilla.org/en/docs...DOM_Interfaces. This contains good examples for manipulation of DOM Elements.

[gRoberts]

It can be easily done by using an array:

function addRow (cells, table) {
  var tr = document.createElement ('tr');
  for (var i=0,cell_length=cells.length; i<cell_length; i++) {
    var td = document.createElement ('td');
    td.appendChild (document.createTextNode (cells[i]));
    tr.appendChild (td);
  }
  table.appendChild (tr);
}
 
var theTable = document.getElementById ('myTable');
var cells = ['foo','bar','baz',1,2,3,true,false];
addRow (cells, theTable);

Let me know how that works out, it should be easy to customize.

Another method would be to use the dom. using insertRow and insertCell. http://developer.mozilla.org/en/docs...able.insertRow

[zeeshanhashmi]

Thanks every one.

One Friend above posted a way to delete a row as follow:

function deleteRow (rowNumber, table) {
  var trs = table.getElementsByTagName ('tr');
  table.removeChild (trs[rowNumber]);
}
 
// note that the first row starts at 0
// the following code will delete the second row:
deleteRow (1, myTable);

In my table, I have a button at the end of each row that is to delete like:

[tr][td]text[/td][td]text[/td][td]text[/td][td] [ DELETE ] [/td][/tr]

now how to get the row number for the particular delete button ?

[brainphat]

Might I suggest a javascript library of some kind? Unless those tables you're creating are never going to change, maintaining this kind of code will really be a challenge.

That said, here's a quick example of one (not the best) way to get what you'd want. Let's say you have a table:

<table id="dynatable"><tbody>
 
<tr><td>row 1 (rowIndex 0)</td><td>text</td><td>text</td><td><input type="button" value="button 1" onclick="" /></td></tr>
<tr><td>row 2 (rowIndex 1)</td><td>text</td><td>text</td><td><input type="button" value="button 2" onclick="" /></td></tr>
<tr><td>row 3 (rowIndex 2)</td><td>text</td><td>text</td><td><input type="button" value="button 3" onclick="" /></td></tr>
 
 
</tbody></table>

Here's the javascript that would return the row when you pressed any row's button by assigning an event handler to each button after the page has loaded:

window.onload = function() {	// have to wait until the dom is loaded before you can start assigning event handlers
 
	// get a reference to the table
	var allrows = document.getElementById('dynatable').rows;
 
	// go through each row
	for (var i=0; i < allrows.length; i++) {
 
		// get a reference to this row
		var thistr = allrows[i];
 
		// get a reference to the first child (assuming it's a button)
		// of the 4th cell of the row
		var butt = thistr.cells[3].firstChild;
 
		// assign an event handler to the button
		butt.onclick = function (e) {
 
			// mostly-browser-independent way of get the element clicked
			var e = e || window.event;
			var el = e.target || e.srcElement;
 
			// get the button's row (button parent = cell, cell parent = row)
			var rowIndex = el.parentNode.parentNode.rowIndex;
 
			alert("This row's rowIndex is " + rowIndex +
				"\nSo it's row number " + (rowIndex + 1) );
 
			// now you can pass the row number to some other function, I guess
			// someOtherFunction(rowIndex);
		}
	}
}

I hope this example helps.

[paul_wilkins]

Presuming that the table has an identifier of some kind, it shouldn't be that difficult at all.

<table id="myTable">
	<tr>
		<td>text</td>
		<td>text</td>
		<td>text</td>
		<td><input type="button" value="delete"></td>
	</tr>

You should place scripts at the bottom of the body, just before the </body>. This is best practice for speeding up your web site, as well as making it easier to work with page elements.

<html>
<head>
</head>
<body>
...
<script src="script.js"></script>
</body>
</html>

If you want to instead place the script it in the head instead, you will need to use some technique to run the script after the page has loaded.

Whichever you decide to do, after the page has loaded you can go through all of the buttons in the table and assign a deleteRow method to each delete button.

var el = document.getElementById('myTable');
var els = el.getElementsByTagName('input');
var i;
for (i = 0; i < els.length; i += 1) {
	el = els[i];
	if (el.type === 'button' && el.value === 'delete') {
		el.onclick = deleteRow;
	}
}

When the button is activated you can climb the DOM until you reach a TR element, and remove it.

function deleteRow() {
	var el = this;
	while (el.nodeName !== 'TR') {
		el = el.parentNode;
	}
	el.parentNode.removeChild(el);
}

[brainphat]

Oo, I forgot you can use elements other than document for getElementsByTagName. Use pmw57's method.