SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I add rows to a table dynamically?

    Ok,

    I'm trying to produce a page with a form on it which is formatted using a table. In the middle is a row which has search parameters in it. What I want to do is to put a drop-down on the left which defaults to "End" but if the user selects another option ("And" or "Or") then I want to insert another row immediately below (which has a drop-down on the right.....) I know I can use the onchange() event to fire off some script, but how do I insert the row into the table?
    TIA
    Paul Simpson, BSc, MCNI, MCNE

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following code works quite well:

    var TableBody = document.getElementById("TheTable");
    var r = document.all.TemplateRow.cloneNode(true);

    TableBody.insertBefore(r, null);

    See:
    http://msdn.microsoft.com/library/de...uildtables.asp

    For more details.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks, Dale - this looks like just what I need!
    Paul Simpson, BSc, MCNI, MCNE

  4. #4
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hummm,

    Well, so far, so good! I have managed to get it working up to a point, but now I have hit another snag....

    I have created this JS function....

    Code:
    	function addrow(rownumber){
    		var row,cell;
    		if(rownumber==0){
    			if(!theform.datarec0.checked){
    				document.all.datatable.deleteRow(7);
    			}
    			else {
    				row=datatable.insertRow(7);
    				cell=row.insertCell();
    				cell.colSpan=3;
    				cell.align="Center";
    				cell.innerHTML="<TABLE id = 'datatable1' width='100%'></table>";
    				row=datatable1.insertRow(0);
    				cell=row.insertCell();
    				cell.innerHTML="Test Text row"+rownumber;
    				cell=row.insertCell();
    				cell.innerHTML="<INPUT type='checkbox' name='datarec[1]' value='Y' onclick = 'javascript:addrow(2)'></INPUT>";
    			}
    		} else{
    			if(!theform.datarec[rownumber-1].checked){
    			}
    			else {
    				row=datatable1.insertRow(rownumber-1);
    				cell=row.insertCell();
    				cell.innerHTML="Test Text row"+rownumber;
    				cell=row.insertCell();
    				cell.innerHTML="<INPUT type='checkbox' name='datarec["+rownumber+"]' value='Y' onclick = 'javascript:addrow("+(rownumber)+")'></INPUT>";
    			}
    		}
    	}
    In my HTML, I then have...

    Code:
    <INPUT type="checkbox" name="datarec[0]" value="Y" onclick = "javascript:addrow(1)"></INPUT>
    (This is the 6th row of my formatting table.)

    What I want to happen is if the check box is tcked, a new row should be inserted below this one and a table created within that row. The table has various columns, but the Far right-hand column needs to be a checkbox which, when ticked, creates another row beneith. When un-ticked, I want it to delete ALL rows below.

    Now then, where I am stuch is in my naming of the tick-boxes etc. I have (as you can see) called them datarec[x], but it seems that the interpreter doesn't recognise this when it comes to process the line (I know I haven't put in the code to delete rows from that point down, yet!)

    Code:
    if(!theform.datarec[rownumber-1].checked){
    It says that there is no object theform.datarec.

    Anyone have any ideas?
    Paul Simpson, BSc, MCNI, MCNE

  5. #5
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could be wrong but I think you want to be using the "id" not the "name" attribute.

    I'm also not sure that inserting whole tables as "innerHTML" works. I think you might have to create a new object and add it to the child record.

    What I did was create a template row in my outside table (i.e including the child table), which I then cloned as follows:

    var r = document.all.TemplateRow.cloneNode(true);

    And then I went through and changed all the id's to make the new row totally unique.

    And so long as you set style="display:none" on your template row, and then set it back to "" on the cloned row nobody can ever tell...
    Last edited by dale_burrell; Dec 9, 2002 at 07:33.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  6. #6
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried the id thing.... no difference, I still get:
    Error: 'theform.datarec' is null or not an object
    The other part (dynamically creating the table) actually works ok. (I tested that seperately).

    The problem seems to be that it desn't recognise
    theform.datarec[x]
    as the name of the object, it interprets it as
    theform.datarec
    which doesn't exist....

    Surely, if you have a whole load of controls on a form which are named as an array, you must be able to refer to each one individually?

    Grrr.....
    Paul Simpson, BSc, MCNI, MCNE

  7. #7
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct me if I'm wrong, but you are creating a label called datarec[x]? That doesn't create an array and therefore can't be accessed as one.

    I suggets sticking to names such as datarec_1, datarec_2.

    Re. name vs id you might find that it causes cross browser problems, but you may not care.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  8. #8
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies if I'm being thick here, but I'm fairly new to JS (I've come via PHP - which I'm only slightly more experienced with!).

    If I create a form with a load of items labled item[1], item[2] eyc, this will get passed back when submitted as an array whcih can be processed as such using PHP. I simply want to do the same here.

    If I use datarec_1 etc as you suggest, then how do I refer to a particular instance from my JS function (i.e. datarec_x)? Is there a method (possibly using DOM or simmilar) with which I can perhaps search all the checkboxes in a form looking for the correct one with a string comparison? This would be long-winded, but doeable! I'd prefer to use an array if it can be done, but if not.....
    Paul Simpson, BSc, MCNI, MCNE

  9. #9
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries,

    Firstly, you are using client side scripting, so nothing is submitted to the server (which is what you referred to with PHP). So we are talking a completely different kettle of fish here.

    It is the DOM you are interested in, i.e. how the browser represents an HTML page.

    This is were using the id instead of the name becomes important.

    So how I would go about this is as follows:
    1) Give the <input id=> an id which is the number of the row.
    2) Call the function using the this pointer of the input i.e. addrow(this). Function prototype is now addrow(input)
    3) In the function find the element in question by using document.getElementById("datarec"+input.id).
    4) Now you have the ability to obtain any row, or input tag by computing the name, so long as you use a consistent naming scheme

    In fact you already have the pointer to the input you are interested in, so you can carry out your check immediately without computing anything. So maybe that is all you need - this is object orientated design, you already have a pointer to the object that is being clicked so to speak.

    Hopefully this will enable you to take the next step.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  10. #10
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Market Harborough, UK
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks!!!

    NOW I understand, and I've got it sorted. I was thinking to procedural and needed to be more OO!
    Paul Simpson, BSc, MCNI, MCNE


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
  •