Jquery or js change id

[wiss.dev]

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:

<script type="text/javascript">
$.test = new Object(); 
$.test.i = 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 .......

[SambaNeko]

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:

$(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.

[wiss.dev]

Thanks mate,
just one more thing, how do i go about changing attributes for multiple elements. i get syntax erro with this 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> 

[SambaNeko]

".('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:

$('#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.

[wiss.dev]

actually clock class element belong to #row1

<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 !!

$('#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');

[SambaNeko]

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:

.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:

.find('.clock:first').attr('id','start-'+ix).end()
.find('.clock:last').attr('id','finish-'+ix).end()

[wiss.dev]

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

<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>

[SambaNeko]

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:

$('tr:first').clone().insertAfter($('tr:first'));