[jQuery] for input cloning
Hello all,
I have the following thing, I want to create a form page where people
(mostly me) can manage the weekly worked hours.
I have created a table and within the table I have put input elements.
(see example below)
When a user using (focus();) any of the input elements in the last
table row, I want to copy the whole row and add it below the last row.
Although I have it working, it doesn't remove the action from the
first row. The copying (in my case cloning) only works on the first
row.
I think this has probable to do with the initial state of the
document, and that jQuery doesn't know about the new added role. (I
think... I could be wrong...)
[html]
...
<div id="content">
<div id="form">
<form action="" method="post">
<table id="ws">
<thead>
<tr>
<th>Day</th>
<th>Project</th>
<th>Activity</th>
<th>Start</th>
<th>End</th>
<th>Duration</th>
<th>Distance</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="date" size="2" maxlength="2"></
input></td>
<td><input type="text" name="project" size="8"
maxlength="8"></input></td>
<td><input type="text" name="activity" size="24"
maxlength="24"></input></td>
<td><input type="text" name="btime" size="8" maxlength="8"></
input></td>
<td><input type="text" name="etime" size="8" maxlength="8"></
input></td>
<td><input type="text" name="dur" size="2" maxlength="2"></
input></td>
<td><input type="text" name="dist" size="4" maxlength="4"></
input></td>
<td><input type="text" name="perc" size="3" maxlength="3"></
input></td>
</tr>
</tbody>
</table>
</form>
</div><!-- //form -->
</div><!-- //content -->
...
[/html]
[js]
$(document).ready(function() {
// When last input-text is click/selected, add new row
$("table#ws tr:last input").focus(function() {
$("table#ws").append( $("table#ws tr:last").clone() );
return false;
});
});
[/js]
Anybody any idea how to fix this? I have tried multiple ways, but no
luck..
Kind regards,
Robin