How do I create an edit dialog box using jquery? Let say I have a html table full of data, and if I click on a button on a row, it will display the data on that row into a jquery dialog box.
I am able to create a dialog box to add data and to remove data, but to edit data and populate the textboxes on the jquery, I am really out of idea.
You can have a edit button in the last cell of each row
<input type="button" calss="edit" value="Edit" />
On click of this button get all the cells data of this row and pass it to dialog box.
$("input.each").click(function(){
var tr = $(this).closes("tr");
var data = [];
tr.find("td:not(:last)").each(function(){
data.push($(this).text());
});
//Here open the dialog box which will have the required fields and using the above data array populate the data fields as required
//Lets say the first column in the table is for "Name"
//You can populate the input "Name" field in the dialog box as.
$("input[name=Name]").val(data[0]);
//Similarly populate all the data fields using data array
});
The dialog box will also have a Save button on click of which it will update the cells of the current row with edited data.
I think you should have an id on each row of the table making it easy to identify it. Then you can fetch the data from the server.
