SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Adding Rows to a Table
-
Aug 12, 2008, 09:34 #1
- Join Date
- Nov 2005
- Location
- Karachi - Pakistan
- Posts
- 1,134
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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
-
Aug 12, 2008, 12:27 #2
- Join Date
- Nov 2005
- Location
- The Netherlands
- Posts
- 808
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It can be easily done by using an array:
Code javascript: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.
-
Aug 12, 2008, 18:10 #3
- Join Date
- Nov 2005
- Location
- Karachi - Pakistan
- Posts
- 1,134
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 ?
-
Aug 12, 2008, 18:38 #4
- Join Date
- Nov 2005
- Location
- Karachi - Pakistan
- Posts
- 1,134
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
can I do this like this ?
Code:var td = document.createElement ('td'); td.appendChild (document.createTextNode (cells[i])); td.className = 'my_CSS_Class_Name_Here' tr.appendChild (td);
please help
-
Aug 12, 2008, 20:09 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
There is a very nice piece of code called the DOM Builder that can be used to easily create page elements.
Code javascript:DomBuilder.apply(window); tr.appendChild(TD({'class': 'my_CSS_Class_Name_Here'}, cells[i]));
Last edited by paul_wilkins; Aug 13, 2008 at 21:20.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Aug 13, 2008, 02:15 #6
- Join Date
- Nov 2005
- Location
- The Netherlands
- Posts
- 808
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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);
-
Aug 13, 2008, 23:05 #7
- Join Date
- Nov 2005
- Location
- Karachi - Pakistan
- Posts
- 1,134
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 14, 2008, 00:40 #8
- Join Date
- Mar 2006
- Posts
- 139
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 14, 2008, 01:00 #9
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Another method would be to use the dom. using insertRow and insertCell. http://developer.mozilla.org/en/docs...able.insertRow
-
Aug 14, 2008, 07:53 #10
- Join Date
- Nov 2005
- Location
- Karachi - Pakistan
- Posts
- 1,134
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks every one.
One Friend above posted a way to delete a row as follow:
Code: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);
[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 ?
-
Aug 14, 2008, 12:18 #11
- Join Date
- Sep 2006
- Location
- Columbia, MO
- Posts
- 13
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code HTML4Strict:<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:
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 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.
-
Aug 14, 2008, 14:08 #12
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Presuming that the table has an identifier of some kind, it shouldn't be that difficult at all.
Code html4strict:<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.
Code html4strict:<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.
Code javascript: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.
Code javascript:function deleteRow() { var el = this; while (el.nodeName !== 'TR') { el = el.parentNode; } el.parentNode.removeChild(el); }
Last edited by paul_wilkins; Aug 14, 2008 at 15:44.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Aug 14, 2008, 15:19 #13
- Join Date
- Sep 2006
- Location
- Columbia, MO
- Posts
- 13
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oo, I forgot you can use elements other than document for getElementsByTagName. Use pmw57's method.
Bookmarks