如何将HTML表单提交与JavaScript表单更新分开？

我的页面上有一个表格，表格的布局如下：

+-------------------------------------------------+
|                      FORM                       |
|  +-------------------------------------------+  |
|  |                   TABLE                   |  |
|  | +---------------------------------------+ |  |
|  | |       |       | THEAD |       |       | |  |
|  | +---------------------------------------+ |  |
|  | +---------------------------------------+ |  |
|  | |       |       | TBODY |       |       | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | +---------------------------------------+ |  |
|  | +---------------------------------------+ |  |
|  | |                 TFOOT                 | |  |
|  | +---------------------------------------+ |  |
|  +-------------------------------------------+  |
|                                                 |
|          SUBMIT                  RESET          |
+-------------------------------------------------+

表单输入在AD中，先前提交的值显示在下面的TBODY中。当用户在表单中输入值并单击“提交”或按“输入”时，显然表单已提交

此外，当用户单击TBODY中某一行中的任何单元格时，我使用JavaScript将该行转换为可编辑行。所有静态文本将替换为输入、选择和复选框。这样用户就可以在线编辑数据。这是用户想要的，所以我必须给他们。我已经尝试过jqGrid，但它对我正在做的事情不起作用

现在，这是我的问题。显然，当用户编辑完一行并按下“enter”键时，整个表单都将提交。这不是我想要的行为，因为我有PHP在幕后寻找特定的POST值；另外，我不希望重新加载整个页面，我希望AJAX为我刷新该区域。我需要的是一种方法，将按“enter”更新行的用户与按“enter”更新初始表单SUMBISION的用户分开

我试过使用两张这样的表格：

+-------------------------------------------------+
|                      FORM                       |
|  +-------------------------------------------+  |
|  |                   TABLE                   |  |
|  | +---------------------------------------+ |  |
|  | |       |       | THEAD |       |       | |  |
|  | +---------------------------------------+ |  |
|  +-------------------------------------------+  |
+-------------------------------------------------+
   +-------------------------------------------+
   |                   TABLE                   |
   | +---------------------------------------+ |
   | |       |       | TBODY |       |       | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | +---------------------------------------+ |
   | +---------------------------------------+ |
   | |                 TFOOT                 | |
   | +---------------------------------------+ |
   +-------------------------------------------+

但我一直没有运气将两个独立表的列对齐。他们必须排成一行，看起来是同一张桌子。我必须提供此演示，因为这是需求文档中的内容

那么，正如我的标题所说，我如何在同一个表单中分离不同的函数呢？如何将初始表单提交与JavaScript更新提交分开？

无jQuery

我不确定问题到底是什么，但如果您想阻止表单提交，可以执行以下操作：

$('#myform').submit(function(e) {
    //proccess form elements
    //ajax call
    e.preventDefault();
});

---

您也可以这样使用：

在问题中发布代码不是比在图表中发布代码更容易吗？在编辑字段时捕获enter键事件，然后在编辑后返回默认行为？@j08691此处发布的代码太多了。我认为这种方式会更好。我不知道你在这里的意思。创建一个隐藏表单的想法如何，该表单可以放置所有提交数据，并使用

document..submit（）

？OP没有指定允许使用jQuery，因此你应该将其作为本机JavaScript编写，或者明确指出您的答案需要jQuery。抱歉，我没有意识到这一点。