javascript - 使用数据表行信息更新文本输入并从对话框编辑行

Question

我有一个数据表，我想从对话框中编辑它。用户应该选择一行，然后打开对话框。对话框文本输入应与所选行 td 匹配。从这里，您可以编辑/更改输入(通过单击编辑启用字段)并保存更改以更新表。 http://jsfiddle.net/BWCBX/5/我有工作代码来选择一行并(在本例中删除它)操作它。如何更新文本输入并根据所述输入编辑表格？提前致谢。

    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

您可以像这样更新输入和数据表
HTML 将 id 添加到输入

<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/