jquery - JQueryデータテーブルは行を追加します

Question

ユーザーが要素を追加、編集、および削除できるテーブルを作成しようとしています。datatables プラグインを使用しています。これが私がやりたいことのチュートリアルです。ここに私のhtmlコードがあります:

<p><button class="editor_create">Add new person</button></p>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="reg_more" width="100%">
        <thead>
            <tr>
                <th width="30%">First Name</th>
                <th width="18%">Last Name</th>
                <th width="18%">Phone</th>
                <th width="18%">Email</th>
                <th width="18%">Ethnicity</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
    </table>

そして、ここにjqueryコードがあります：

$(document).ready(function(e) {
$('#reg_more').dataTable({
                "bLengthChange": false,
                "bInfo": false,
                "bPaginate": false,
                "bStateSave": true,
                "rowHeight": 'auto',
                "bFilter": true,
                "bSort": false,
                "bAutoWidth": false,

                "aoColumns": [
                    { "mDataProp": "First Name" },
                    { "mDataProp": "Last Name" },
                    { "mDataProp": "Phone" },
                    { "mDataProp": "Email", "sClass": "center" },
                    { "mDataProp": "Ethnicity", "sClass": "center" },
                    {
                        "mDataProp": null, 
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_edit">Edit</a>',
                        "bSortable": false,
                        "bSearchable": false
                    },
                    {
                        "mDataProp": null, 
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_remove">Delete</a>',
                        "bSortable": false,
                        "bSearchable": false
                    }
                ]
            }); 
        }
        $("#submit").show();
        window.scrollTo(0,document.body.scrollHeight);
    });

    var editor = new $.fn.dataTable.Editor( {
        "domTable": "#reg_more"
    } );

    //style="display:none;"
    //$("#addbtn").click(addrow);

    editor.add( [ 
      {
          "label": "First Name:",
          "name": "fname"
      }, {
          "label": "Last Name:",
          "name": "lname"
      }, {
          "label": "Phone:",
          "name": "phone"
      }, {
          "label": "Email:",
          "name": "email"
      }, {
          "label": "Ethnicity:",
          "name": "ethnicity"
      }
    ] );

    $('button.editor_create').on('click', function (e) {
        e.preventDefault();

        editor.create(
            'Add new person',
            {
                "label": "Add",
                "fn": function () {
                    editor.submit()
                }
            }
        );
    } );

    $('#reg_more').on('click', 'a.editor_edit', function (e) {
        e.preventDefault();

        editor.edit(
            $(this).parents('tr')[0],
            'Edit record',
            {
                "label": "Update",
                "fn": function () { editor.submit(); }
            }
        );
    } );

    $('#reg_more').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();

        editor.message( "Are you sure you want to remove this row?" );
        editor.remove(
            $(this).parents('tr')[0],
            'Delete row', 
            {
                "label": "Update",
                "fn": function () {
                    editor.submit()
                }
            }
        );
    } );
});

追加ボタンは、ユーザーがすべての情報を入力できる小さなフォームを開くのではなく、フォームを送信することになります。「新しいレコードの作成」ボタンがフォームを開くチュートリアルのように、小さなウィンドウをポップアップさせるにはどうすればよいですか?

Answer 1

この部分を変更します。

    }
    $("#submit").show();
    window.scrollTo(0,document.body.scrollHeight);
});

これに：

    $("#submit").show();
    window.scrollTo(0,document.body.scrollHeight);

（余分なものを削除し}、});

Answer 2

.ui-dialog 
{ 
    margin-top:-300px;margin-left:400px;
}