Question

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.

Answer 1

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.