JQuery 数据表添加行

Question

我正在尝试创建一个用户可以在其中添加、编辑和删除元素的表。我正在使用数据表插件。这是我想做的tutorial。这是我的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;
}