The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Adding Rows to a Table

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.

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:

Code javascript:

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);

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:

Code JavaScript:

window.onload=function(){// have to wait until the dom is loaded before you can start assigning event handlers// get a reference to the tablevar allrows = document.getElementById('dynatable').rows;// go through each rowfor(var i=0; i < allrows.length; i++){// get a reference to this rowvar thistr = allrows[i];// get a reference to the first child (assuming it's a button)// of the 4th cell of the rowvar butt = thistr.cells[3].firstChild;// assign an event handler to the button
butt.onclick=function(e){// mostly-browser-independent way of get the element clickedvar 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);}}}