Javascript 创建一个复杂的html5表单。获取动态表单数据。身份证和姓名？

编辑：几乎有这个工作，但删除只是不工作，因为我认为它应该。由于某种原因，它在加载时执行函数

我有一个表单，它是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>

索引号
教师类型
数据中心
机构预算金额
PI预算金额
PI调整预算
评论
611000
有规律的
$43,0000
$33,0000                                     
+
-

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

611000
$43,0000
$33,0000                                     
+
-

此外，为了完整性，我正在使用javascript来处理添加行的按钮（这一个用于常规员工类型行上的按钮，其他按钮将显示为Temp employee行等。然后还有不同的表，因此我还认为我的java脚本和html必须将表编码为myTableFaculty、MyTableException等。）

       <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>

$（文档）.ready（函数（）{
函数addRow（）{
var$myTable=$（“#myTable”）.find（'tbody'）；
var parent=$（this.parent（“td”）.parent（“tr”）.attr（“id”）；
var newRowID=$myTable.children（“tr”）.length+1；
变量$newRow=$（“”）；
$newRow.append（$（$611000”）；
$newRow.append（$（“”））；
//查看数据emp类型不确定如何知道返回的内容，除非在此处使用计数器动态生成名称。应该
//每个字段只能有一种类型，因此不要将EmpType作为泛型：EmpTypeRegular1，如果他们添加了另一名员工，则EmpTypeRegular2等。
$newRow.append（$（“”））；
$newRow.append（$（“$430000”）；
$newRow.append（$（“$30000”）；
$newRow.append（$（“”））；
$newRow.append（$（“”））；
$newRow.append（$（“”）。append（$（“+”）.bind（“单击”，添加行））；
$newRow.append（$（“”）.append（$（“-”）.bind（“单击”，RemoveEGULarrow（newRowID）））；
$myTable.append（$newRow）；
};
函数移除器EGULARROW（索引）{
$（“#regFacEmpType”+索引）.remove（）；
};
$（.removeRegular”）。在（“单击”，removeRegularRow（-1））；
$（.addRegular”）。在（“单击”，添加行）；
});

上面的代码不起作用，在提交按钮后添加行（轻松修复），但随后它消失了。不知道为什么，这是在jquery视图中，可能部分不够大，或者知道如何动态更改

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

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

我几乎认为在rails（甚至Sinatra）这样的框架中这样做会更容易。我只是有一段时间没有做过这种低级类型的html欺骗，而且记不起正确的方法

---

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

因为我可以nt在评论中发布，我被迫将其作为答案发布。此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>

索引号
教师类型
数据中心
机构预算金额
PI预算金额
PI调整预算
评论
611000
有规律的
$43,0000
$33,0000
+
-
$（文档）.ready（函数（）{
函数addRow（）{
var$myTable=$（“#myTable”）.find（'tbody'）；
var parent=$（this.parent（“td”）.parent（“tr”）.attr（“id”）；
var newRowID=$myTable.children（“tr”）.length+1；
变量$newRow=$（“”）；
$newRow.append（$（$611000”）；
        <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>