期望的结果

我想要display: none 应用于整个table 表单之后submit 按钮被点击，因为一旦我得到订单号（$order->get_id() ), 在第二步中，我想显示订单详细信息和第二个表单表，以编辑每个项目的权重（并且带有订单列表的初始表单表会占用太多空间）。（如果需要或有帮助，我可以发布两个表格的截图）。

观察结果onsubmit="this.style.display=\'none\'" （我没有将其与javascript 代码变体）保存submit button 短暂单击后，高度只有几个像素（但并没有完全消失），但几秒钟后再次出现。

包括代码在内的步骤我制作了一个插件，其函数连接到add_menu_page 和add_submenu_page \'s

add_menu_page( 
        \'Packing-App\', // $page_title
        \'Pack-App\', // $menu_title
        \'manage_options\', // $capability
        \'pg-packapp1\', // $menu_slug
        \'fn_packapp1\', // $function
        \'dashicons-tickets\', // $icon_url
    54 // $position
);

add_submenu_page( 
        \'pg-packapp1\', // $parent_slug
        \'All Open Orders\', // $page_title
        \'Open Orders\', // $menu_title
        \'manage_options\', // $capability
        \'pg-packapp1\', // $menu_slug
        \'fn_packapp1\' // callable $function = \'\'
        // int $position = null
);
    
add_submenu_page( 
        \'pg-packapp1\', // $parent_slug
        \'One Open Order\', // $page_title
        \'One Order\', // $menu_title
        \'manage_options\', // $capability
        \'pg-packapp2\', // $menu_slug
        \'fn_packapp2\' // callable $function = \'\'
        // int $position = null
);

接下来，我对on-hold 订单。

$on_hold_orders = wc_get_orders( 
    array (
        \'limit\' => -1,
        \'post_type\' => \'shop_order\',
        \'status\'    => \'on-hold\'
    )
);

然后，我创建了form 内部atable （包裹在<div> 元素）使用foreach 环（为了简单起见，我在这里省略了表头和其他表格单元格…）

$edit_form1 = \' edit\';
foreach( $on_hold_orders as $order) {
    ?>
    <div class="table1" id="table1">
    <tr>
    <td>    
    <form 
        onsubmit="this.style.display=\'none\'"
        id="form_1"
        name="form_order_id"
        action="#"
        method="post"
        >
                
        <input 
            type="hidden" 
            name="frub_id"
            value="<?= $order->get_id() ?>"
        />
        
        <input 
            onclick="myClick()"
            type="submit" 
            name="<?= $order->get_id() ?>"
            value="<?= $order->get_id() . $edit_form1 ?>"
        />
        </form>
    </td>
    </tr>
    </div>
    <?php
    }

一旦表单submit 按下按钮，我想隐藏整个表。我试了一些javascript 代码，但无效：

<script type="text/javascript">
        /* 3rd attempt */
        function myClick(){
            var form = document.getElementById("form_order_id");
            form.style.display = "none";
            document.getElementById("table1").style.display = "none";
            document.getElementById("form_1").style.display = "none";
            document.getElementById("submit").style.display = "none";
            document.getElementById("9275").style.display = "none";
            document.getElementById("table_id").style.display = "none";
            event.preventDefault();
        }
    
        /* 2nd attempt */
        document.getElementById("submit").onclick = function() {
            document.getElementById("table1").style.display = "none";
        }
        
        /* 1st attempt */
        document.forms[\'form_order_id\'].addEventListener(\'submit\', function (event) {
            this.style[\'display\'] = \'none\';
            event.preventDefault();
        });
</script>

另外，我还是一个新手，我很感谢你的帮助。

document.getElementById("form_1").style.display = "none";

document.getElementById("form_1").style.visibility = "hidden";

<form onclick="myClick()" id="form_1" name="form_order_id" action="#" method="post" >               
   <input type="hidden" name="frub_id" value="<?= $order->get_id() ?>" />
   <input type="submit" name="<?= $order->get_id() ?>" value="<?= $order->get_id() . $edit_form1 ?>" />
</form>
<script type="text/javascript">
   function myClick(){
      document.getElementById("form_1").style.display = "none";
   }
</script>