javascript - 创建复杂的html5表单。获得动态表单数据。 ID与名称？

编辑：几乎有此工作，但removeRow不能像我认为的那样工作。并且由于某种原因它会在加载时执行功能。

我有一个表单，它的html5。有一个带有行的表。每行都有+或-，因为可以添加或销毁另一行。添加/销毁的行特定于添加了加号按钮的行...

（原谅下面代码的不友好状态及其ID，值和名称的混合混搭，这最终是我要寻求帮助的内容）

首先标题

   <tr id="FacultyEmployees">
      <th  align="center" class="style1">Index Number</th>
      <th  align="center" class="style1">Faculty Type</th>
      <th  align="center" class="style1">IDC</th>
      <th  align="center" class="style1">Agency Budgeted Amount</th>
      <th  align="center" class="style1">PI Budgeted Amount</th>
      <th  align="center" class="style1">PI Adjusted Budget</th>
      <th  align="center" class="style1">Comments</th>
   </tr>

   <tr =id="regFacEmpType1"><!-- next row would be regExemptEmpType1 etc -->
                <td align="center">611000</td>
                <td align="center">Regular</td>
                <td><input type="checkbox" name="IDC" value="true" /></td>
                <td align="center" id="agencyBudgeted1">$43,0000</td>
                <td align="center" id="piBudgetedAmount1">$33,0000</td>
                <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5"/></td>
                <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                <td><button id="addRegular">+</button></td>
                <td><button>-</button></td>

   </tr>

但是添加的数据Faculty类型将是用户可输入的，但我仍然需要知道的是Faculty类型，例如添加了示例行：（上面的tr是表单第一次加载时的时间，因此它已经作为常规Faculty类型填写了数据行。）

   <tr =id="tempEmpType1">
                    <td align="center">611000</td>
                    <td><input type="text" name="FacultyTypeRegular" width="5"/></td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5"/></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button id="addRegular">+</button></td>
                    <td><button>-</button></td>

       </tr>

另外为了完整性，我正在处理用来添加一行的按钮的javascript（这是针对常规员工类型行上的按钮的，其他按钮会像Temp员工行等），然后还有不同的表，所以我也认为我的Java脚本和html必须将表编码为myTableFaculty，myTableExempt等。

       <script language='javascript' type='text/javascript'>

        $(document).ready(function () {

            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow)));
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
                $myTable.append($newRow);
            };

            function removeRegularRow(index) {
                        $("#regFacEmpType" + index).remove();
            };

            $(".removeRegular").on("click", removeRegularRow(-1));



            $(".addRegular").on("click", addRow);
        });
</script>

上面的代码无法在“提交”按钮后添加行（轻松修复），但随后消失了，不知道为什么，为什么他不在jquery的视图中，也许该部分不够大或者知道可以动态更改？

因此，该按钮可以添加另一个tr，如果单击此按钮，它将添加另一个tr，并且该数据必须是该tr唯一的。所以我想我的问题是，当我添加另一个TR时，是否要使用javascript来命名每个输入更改以反映我拥有的TR？这会使表单提交变得混乱，我是否应该使用非唯一名称，而是以某种方式使用每个td的ID来纠缠此数据？

某些tds中的ID是因为它显示了来自服务器的返回数据或我需要该ID的计算值，所以我知道如何在javascript视图中将该字段更新为用户（实际上是ajax）

我几乎认为在Rails（甚至Sinatra）之类的框架中执行此操作会更容易。我只是有一段时间没有做过这种较低级别的html查找，而且不记得正确的方法。

我想我要解决的最大问题是如何正确开发此表单的数据繁重部分，以便我可以在那里提交行和动态添加的行，知道它来自哪一行。要知道它何时提交，我可以重新计算作为计算值的字段并相应地更新它们。

最佳答案

由于我无法在评论中发布此内容，因此我不得不将其发布为答案。该JS会按预期追加行，只是不确定下一步要去哪里；

编辑：第一个解决方案仅适用于初始[+]按钮，该解决方案也适用于动态添加的行。

        <table id='myTable'>
            <tbody>
                <tr id="FacultyEmployees">
                    <th align="center" class="style1">Index Number</th>
                    <th align="center" class="style1">Faculty Type</th>
                    <th align="center" class="style1">IDC</th>
                    <th align="center" class="style1">Agency Budgeted Amount</th>
                    <th align="center" class="style1">PI Budgeted Amount</th>
                    <th align="center" class="style1">PI Adjusted Budget</th>
                    <th align="center" class="style1">Comments</th>
                </tr>
                <tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
                    <!-- next row would be regExemptEmpType1 etc -->
                    <td align="center">611000</td>
                    <td align="center">Regular</td>
                    <td><input type="checkbox" name="IDC" value="true" /></td>
                    <td align="center" id="agencyBudgeted1">$43,0000</td>
                    <td align="center" id="piBudgetedAmount1">$33,0000</td>
                    <td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
                    <td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
                    <td><button class='addRegular' type='button'>+</button></td>
                    <td><button class='removeRegular' type='button'>-</button></td>
                </tr>
            </tbody>
        </table>

    <script language='javascript' type='text/javascript'>

        $(document).ready(function () {

            function addRow() {
                var $myTable = $("#myTable").find('tbody');
                var parent = $(this).parent("td").parent("tr").attr("id");
                var newRowID = $myTable.children("tr").length + 1;

                var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
                $newRow.append($("<td align='center'>611000</td>"));
                $newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
                //see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using  a counter.  Should
                //only be one type of each field, so instead of EmpType being generic:  EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.

                $newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
                $newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
                $newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
                $newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
                $newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow)));
                                    $newRow.append($("<td></td>").append($("<button class='removeRegular' type='button'>-</button>").bind("click", removeRow)));
                $myTable.append($newRow);
            };
            function removeRow() {
                if (confirm("you sure?")) {
                    $(this).parent("td").parent("tr").remove();
                };
            };
            $(".addRegular").on("click", addRow);
            $(".removeRegular").on("click", addRow);
        });
</script>