从你的截图和解释中，我想我理解你想要实现的目标。

概念是，这个问题更多的是X-Y Problem. 我的建议是改变想法，并尽可能多地使用每个默认值可用的内容：Quick Edit 盒

快速编辑扩展快速编辑的默认挂钩是quick_edit_custom_box. 它有两个参数：$colName 以及$postType. 使用该选项可扩展快速编辑框。示例包括AJAX保存操作所需的Javascriptan be found in that answer, 或this answer 以及在that answer by Frank.

Javascript全球inlineEditPost JavaScript对象保存您需要的所有操作。只是console.log( inlineEditPost ); 在控制台的post admin list屏幕上，查看可用功能的列表：

• edit: function (id) {
• getId: function (o) {
• init: function (){
• revert: function (){
• save: function (id) {
• setBulk: function (){
• toggle: function (el){
• type: "post"
• what: "#post-"

保存

保存操作在edit_post 钩你应该检查一下$_POST[\'is_quickedit\'] 待设置。从那以后，您可以处理所有数据字段的保存。

将快速编辑移动到一个新位置

以上所有操作的主要目标是构建新的UI。完成后，您可能希望将表宽度限制为50%(class="wp-list-table") 并在屏幕的另一半插入修改后的快速编辑框。

Edit 发现扩展核心jQuery函数实际上更容易。

( function( $ ) {
    "use strict";


    var id = \'\',
        rowData = \'\',
        $wpInlineEditPost = inlineEditPost.edit;

    inlineEditPost.customFunction= function( id ) {
        var $this = this;

        // Working with promises to bubble event later than core.
        $.when( inlineEditPost ).then( function() {
                setTimeout( function() {
                    $( \'#edit-\' + id ).insertAfter( $( \'.wp-list-table\' );
                }, 0 );
            } );
    }

    inlineEditPost.edit = function( id ) {
        var $this = this;

        // Run WP core first. Do not unbind from core.
        $wpInlineEditPost.apply( $this, arguments );

        // Run our custom function
        $this.customFunction( id );
    };
} )( jQuery || {} );

如果你管理好了最后一部分，那么如果你编辑我的答案并添加缺少的部分（移动方框）就好了，因为我目前没有测试系统。