Update text inputs with Datatable row info and edit row from dialog

Question

I have a Datatable that I want to edit from a dialog. User should select a row, then open the dialog. The dialog text inputs should match the selected row td's. From here, you can edit/change the inputs (by enabling fields from clicking edit) and save changes to update the table. http://jsfiddle.net/BWCBX/5/ I have the working code to choose a row and (delete it in this case) manipulate it. How can I update the text inputs and edit the table from said inputs? Thanks in advance.

    var oTable;

    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });


    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );


    /* Init the table */
    oTable = $('#example').dataTable( );



/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
    return oTableLocal.$('tr.row_selected');
}

Answer 1

you can update the inputs and datatable like this
HTML add id to the inputs

<div id="dialog" title="Properties">
  <table>
        <tbody>
          <tr>
            <th>Rendering engine</th>
            <td><input id="rendering" type='text'  /></td>
          </tr>
          <tr>
            <th>Browser</th>
            <td><input id="browser" type='text'  /></td>
          </tr>
        </tbody>
      </table>
    <input type='button' value='Edit' class='editBtn' />
    <input type='button' value='Save Changes' class='saveBtn' />
</div>     

JS

var properties;//all td from .row_selected
$( "#opener" ).click(function() {
              properties=fnGetSelected( oTable ).find("td"); //update selected row
              $( "#dialog" ).dialog( "open" );
              $( ".saveBtn" ).hide();
              //update the input fields 
              $("#rendering").val(properties.eq(0).html());
              $("#browser").val(properties.eq(1).html());
              $( ".editBtn" ).show();
              $("div#dialog input:text").attr("disabled", "disabled");  
          });
//update the dataTable with the input values and close #dialog
$( ".saveBtn" ).click(function() {
    properties.eq(0).html($("#rendering").val());
    properties.eq(1).html($("#browser").val());
    $( "#dialog" ).dialog( "close" );
});    

http://jsfiddle.net/BWCBX/6/