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

Question

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

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

表单输入位于THEAD中，之前提交的值显示在下面的TBODY中。当用户在表单中输入值时，点击＆＃34;提交＆＃34;或按＆＃34;输入＆＃34;显然，提交表格。

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

现在，这是我的问题。显然，当用户完成一行的编辑并按下＆＃34;输入＆＃34;然后整个表格将提交。这不是我想要的行为，因为我在幕后寻找特定的POST值;另外，我不希望整个页面重新加载，我希望AJAX能够为我刷新这个区域。我需要的是一种分离用户按下＆＃34;输入＆＃34;更新用户按下＆＃34;输入＆＃34;对于初始形式的总结。

我尝试过使用两个表：

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

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

所以，就像我的标题所说，我如何在同一表格中分离不同的功能？如何将初始表单提交与JavaScript更新提交分开？

Answer 1

没有jQuery

我不确定问题是什么，但是如果你想阻止表单提交，你可以这样做：

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

您也可以使用以下内容：https://stackoverflow.com/a/8664680/4006027