Jquery or js change id-VBForums
Results 1 to 8 of 8

Thread: Jquery or js change id

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    222

    Jquery or js change id

    Hi Fellas,
    i have a html table with 5 <td> elements with an input in each one of them.
    on the click event of a button:
    PHP Code:
    <script type="text/javascript">
    $.
    test = new Object(); 
    $.
    test.= new Object();
    $.
    test.i.nCounter=1;
        $(
    document).ready(function(){
        
            $(
    "#test").click(function(){
            $.
    test.i.nCounter++;// increment to be embeded in the id of the new elements        
            
    var ix=$.test.i.nCounter;
            $(
    '#row1').clone().attr('id','row'+ix).appendTo('table.timesheet');
            
    // now i need to reID each element inside the new row
           
    ('#row'+ix).find('#calendar').attr('id','date-'+ix);alert(document.getElementById('date-'+ix).id);// this errors : object #row2 has no method 'find' ( where 2 is ix)

        
    });
        });

    </script> 
    so first row elements id would be something like
    name-1
    job-1
    dob-1......
    and second row should be
    name-2
    job-2
    dob-2......

    or is there a better suggestion of trasversing and getting values of those elements

    thanks in advance .......

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Jquery or js change id

    There doesn't seem to be any point in creating the $.test object. And it seems superfluous to give every <td> a unique id. But, if I were to write your script without changing the parameters of the scenario:
    Code:
    $(document).ready(function(){
        $("#test").click(function(){
            var ix = $('.timesheet tr').length+1;
            $('.timesheet tr:first')
                .clone()
                .attr('id','row'+ix)
                .find('#calendar')
                .attr('id','date-'+ix)
                .end()
                .appendTo('.timesheet');
        });
    });
    ix is derived by checking how many <tr>s are already in the table. The first <tr> is selected and cloned; the clone gets applied an id, then is searched for an element with id "calendar," whose id gets changed. Then the search is cancelled (so that the next operation will refer to the cloned <tr> again) and the cloned <tr> is appended to the table.

  3. #3

    Thread Starter
    Addicted Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    222

    Re: Jquery or js change id

    Thanks mate,
    just one more thing, how do i go about changing attributes for multiple elements. i get syntax erro with this code
    PHP Code:
    <script type="text/javascript">

    $(
    document).ready(function(){
                $(
    "#add").click(function(){
            
             var 
    ix=$('.timesheet tr').length(); 
            $(
    '#row1').clone().attr('id','row'+ix).find('.calendar').attr('id','date-'+ix)
            .(
    'clock').first().attr('id','start-'+ix)
            .(
    'clock').last().attr('id','finish-'+ix)
            .
    end()        
            .
    appendTo('table.timesheet');
              
        });
    </script> 

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Jquery or js change id

    ".('clock')" is not valid syntax. Is this guess correct: you have (at least) two elements in the .calendar element with class "clock" and you want to add ids for the first one and the last one?...

    The methods you can use on a jQuery object return a reference to an element (or elements); if you simply select an element [like when you write $('#row1')], then you get a reference to that element. If you use clone(), it returns a reference to the cloned object that the method has created. If you used find(), you get a reference to the object that the method found. If you use attr(), you get a reference to the object whose attribute was changed.

    This is why you can achieve long chains of methods like the one I wrote above: you keep getting back an object reference that you can continue to use.

    So that's just to try to explain this:
    Code:
    $('#row1').clone().attr('id','row'+ix)
      .find('.calendar').attr('id','date-'+ix)
        .find('.clock').first().attr('id','start-'+ix).end()
        .find('.clock').last().attr('id','finish-'+ix).end()
      .end()        
    .appendTo('table.timesheet');
    The indentation is optional, but trying to show the selection chain. You go from #row1 > clone > .calendar in clone > first .clock in .calendar > end() to return to .calendar > last .clock in .calendar > end() to return to .calendar > end() to return to the clone.

  5. #5

    Thread Starter
    Addicted Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    222

    Re: Jquery or js change id

    actually clock class element belong to #row1

    Code:
    <tr  class="tsrow"  id="row1">
    			
    			
    			<td> <input type="text" class="calendar" id="date-1" maxlength="10" tabindex=""><br>          </td>
    			<td><input type="text"  class="clock" id="start-1" > <br>			</td>
    
    			<td><input type="text" class="clock" id="finish-1" > <br>			</td>
    			
    			</tr>
    this isnt doing it either !!
    HTML Code:
    $('#row1').clone().attr('id','row'+ix).find('input').attr('id','date-'+ix).end()
    		.find('.clock').first().attr('id','start-'+ix).end()
    		.find('.clock').last().attr('id','finish-'+ix).end()	
    				.appendTo('table.timesheet');
    Last edited by wiss.dev; Jan 24th, 2012 at 04:38 AM.

  6. #6
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Jquery or js change id

    Ah, my mistake on part of the explanation above; the end() function undoes the last filter operation (singular) that you used, and both find() and first()/last() are filter operations, so you would need to undo both of them:
    Code:
    .find('.clock').first().attr('id','start-'+ix).end().end()
    .find('.clock').last().attr('id','finish-'+ix).end().end()
    ...or use some pseudo-class selectors instead:
    Code:
    .find('.clock:first').attr('id','start-'+ix).end()
    .find('.clock:last').attr('id','finish-'+ix).end()

  7. #7

    Thread Starter
    Addicted Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    222

    Re: Jquery or js change id

    Thanks SambaNeko, you are a legend
    finnaly got ny head around it
    can i ask 1 more question,
    each row has a button which should create a consecutive row which is not necessarily the last row on the table so i used the live() function
    i tried this .appendto('table.timesheet #row1') but it creates the new row on the right outside the table range

    HTML Code:
    <script type="text/javascript">
    	
    $(document).ready(function(){
    		$("#add,.add").live('click',function(){ //.add is  created dynamically but it doesnt work while #id a button on the dom and it works
    		
    		var ix=$('tr.tsrow').length;
    		ix++; 
    		$('#row1').clone().attr('id','row'+ix)
    			.find('.calendar').attr('id','date-'+ix).end()
    			.find('.clock').first().attr('id','start-'+ix).end().end()  
    			.find('.clock').last().attr('id','finish-'+ix).end().end()
    			.find('select').attr('id','jobs-'+ix).end()
    			.find('.line').attr('id','deleteadd-'+ix)
    				.find('img:first').attr('id',ix).end() 
    				.find('img:last').attr('id',ix).end()
    			.end()
    		.appendTo('table.timesheet');
    			   	
    		});
    
    });
    	</script>
    Last edited by wiss.dev; Jan 24th, 2012 at 07:01 PM.

  8. #8
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Jquery or js change id

    If you want a newly created row to be inserted after the one containing the button you've clicked, you'd want to use something like insertAfter() instead of appendTo(). Simple example:
    Code:
    $('tr:first').clone().insertAfter($('tr:first'));

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.