I’ve got a table which has a button to add a new row. When this new row is added, the field RS_Staff_Title1 becomes incremented to RS_Staff_Title2 and so on. What this button also does is adds a row to another table.
I’ve then got this function to copy the contents of RS_Staff_Title1 into a field on this other table as you type.
$("#RS_Staff_Title1").keyup(function() {
var value = $(this).val()
$("p").text(value);
}).keyup();
What I need to achieve though is for any content in RS_Staff_Title1 on StaffTable to be copied into RS_Staff_Title1 on ResourceTable and so on for however many increments are made
UPDATE:
My HTML for the row in the Staff table is:
<tr>
<td><input id="RS_Staff_Title1" name="RS_Staff_Title1" style="width:100%;"></td>
The JS to add a row to both tables is:
$("#add_row").click(function() {
var row = $("#staff tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input").each(function() {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
$("#add_row").click(function() {
var row = $("#resource-cost tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input").each(function() {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
In order to not bind
keyupevent for every new row you can use.live(.onin latest jQuery) to add it only once and make it work for any new items added. Besides, ID must be unique and you can’t have two elements with ID RS_Staff_TitleN.I would place a class on RS_Staff_Title elements and bind keyup handler like this:
RT_Staff_Title – suggested ID for RS_StaffTitle in ResourceTable in order to have unique IDs
.data("rowindex");should be set like this.data("rowindex", index)for newly added rs_staff_title element when you create it (just easier to get it from there than from ID and it is needed to find corresponding element in ResourceTable later)