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