SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    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

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    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.

  3. #3
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    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 ?

  4. #4
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zeeshanhashmi View Post
    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
    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);

  7. #7
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    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

  8. #8
    SitePoint Zealot
    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.

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ize View Post
    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.
    Another method would be to use the dom. using insertRow and insertCell. http://developer.mozilla.org/en/docs...able.insertRow


  10. #10
    if ($zee == "Guru") { $zee--;}
    Join Date
    Nov 2005
    Location
    Karachi - Pakistan
    Posts
    1,133
    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);
    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 ?

  11. #11
    SitePoint Member
    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.
    Garvin

    Smooth Operator
    Snappy Dresser

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  13. #13
    SitePoint Member
    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.
    Garvin

    Smooth Operator
    Snappy Dresser


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •