#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Location
    Riga
    Posts
    3
    Rep Power
    0

    Question JQuery cloning and inserting a table row


    I've the following html:

    Code:
    <table>
    ...
    <tr id="InputRow">
      <td>
        <input type="text" name="..." value=""/>
        <span>
         </span>
      </td>
    </tr>
    </table>
    and JavaScript:

    javascript Code:
     
    function AddRow(far)
    {
    var rowclone=$('#InputRow').clone(); //clone the row
    for (i=0; i<far.length; i++)
        {
        if (i == 0)
            {
            $('#InputRow').find('input').val(far[i]['id']);
            $('#InputRow').find('span').html(far[i]['fname']);
            }
        else
            {
            rowclone.find('input').val(far[i]['id']);
            rowclone.find('span').html(far[i]['fname']);
            $('#InputRow').nextAll("tr:last").after(rowclone); //insert a new row after the existing at the end
            }
        }
    }
     
    $(function()
    {
    AddRow(ar); //JSON object with a simple array
    }
    );


    So what I need to do is to simply clone the row, substitute new values from an array and insert it after the last existing row (if array's size more then 1). But this doesn't work! Where is an error?

    Thanks in advance!
  2. #2
  3. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    when are you calling the function? in the head? inside a document ready function? at the end just before the body close tag?
    a: true is 1 and false is 0 right?
    b: 1
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Location
    Riga
    Posts
    3
    Rep Power
    0
    Originally Posted by haydenchambers
    when are you calling the function? in the head? inside a document ready function? at the end just before the body close tag?
    Inside the document ready function:

    javascript Code:
     
    $(function()
    {
    AddRow(ar); //JSON object with a simple array
    }
    );
  6. #4
  7. hack of all trades
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2009
    Location
    Madrid
    Posts
    900
    Rep Power
    517
    sorry Starmaster.. didnt read properly
    where exactly are you getting to in the function?
    Code:
    function AddRow(far)
    {
    var rowclone=$('#InputRow').clone(); //clone the row
    console.log("loop count= " + far.length);
    for (i=0; i<far.length; i++)
        {
        if (i == 0)
            {
            $('#InputRow').find('input').val(far[i]['id']);
            $('#InputRow').find('span').html(far[i]['fname']);
            }
        else
            {
            console.log("should clone here");
            //comment out for the the moment
            //rowclone.find('input').val(far[i]['id']);
            //rowclone.find('span').html(far[i]['fname']);
            $('#InputRow').nextAll("tr:last").after(rowclone);
            //not too nice because there are multiple elements now with same id - cause problems?
            //check inserting simple element straight after
            $('#InputRow').after("<tr><td>test</td></tr>");
            //longer way of doing nextAll ?
            $('#InputRow')parent().children("tr:last").after("<tr><td>test2</td></tr>");
            //longer way of doing clone ?
            $('#InputRow')parent().children("tr:last").after(rowclone);
            }
        }
    }
    a: true is 1 and false is 0 right?
    b: 1
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Location
    Riga
    Posts
    3
    Rep Power
    0
    Actually I've solved the problem. This is an example that worked:

    javascript Code:
     
    function AddRow(far)
    {
    for (i=0; i<far.length; i++)
        {
        if (i == 0)
            {
            $('#InputRow').find('input').val(far[i]['id']);
            $('#InputRow').find('span').html(far[i]['fname']);
            }
        else
            {
    	rowclone=$('#InputRow').clone();
            rowclone.find('input').val(far[i]['id']);
            rowclone.find('span').html(far[i]['fname']);
    	if ($('#InputRow').siblings().length == 0)
    		{
    		$('#InputRow').after(rowclone);
    		}
    	else
    		{
            	$('#InputRow').siblings(":last").after(rowclone);
    		}
            }
        }
    }


    I've mistaken in DOM logic, my fault. First time there were no clones ($('#InputRow').siblings().length), so there were no DOM objects to insert clone after.

    //not too nice because there are multiple elements now with same id - cause problems?
    //check inserting simple element straight after
    This is not a problem, because the id is always calculated on an element which is first to be found on a page. You can insert in the beggining of my loop this code to test it:

    console.log((i+1)+' loop iteration: '+$('#InputRow').length+' ids');
    Btw thanks for help!

IMN logo majestic logo threadwatch logo seochat tools logo