个人中心
gpt4 book ai didi

javascript - 使用 jquery 从表中删除动态添加的行

转载 作者：太空狗 更新时间：2023-10-29 15:29:52 26 4
gpt4 key购买 nike

当按下加号时，我的代码会在表中添加一行，并添加正确的引用，因此当我提交表单数据时，我知道什么是数据。减去我在删除刚刚添加的行或之前从表中添加的另一行时遇到了一些困难。

我想也许它是我在 addRow 函数的最后一行中的 .bind ，正如我在这里看到的那样，它可能应该是 .on ？

Issue while removing a dynamically added row from a html table using jquery

无论哪种情况，我的代码都在这里:

   <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))); //make it where any plus subsequently added will add a row
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
                $myTable.append($newRow);
            };


            //for some reason this is called everytime I click the PLUS also it does nothing?
            function removeRegularRow(index) {
                        $("#regFacEmpType" + index).remove();
            };



            $(".addRegular").on("click", addRow); //make it so the default row adds a new one.
        });
</script>
</head>
<body>
    <FORM action="" method="post">

    <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 type='button' class="addRegular">+</button></td>                    
                </tr>
            </tbody>

        </table>
        <button type="submit"/> Submit </button>
        </FORM>

最佳答案

解决问题

关于您的 JavaScript 代码:

  • 删除 bind()功能；
  • 删除 removeRegularRow()功能；

  • 添加以下 on('click'..里面的事件$(document).ready :

    $("#myTable").on('click', '.removeRegular', function(){

        $(this).parent().parent().remove();
        // It's faster with: $(this).closest('tr').remove();

    });

为什么这可以解决手头的问题

问题是这行元素是动态插入的，并且只有在 DOM 加载完所有内容并且是 ready 之后才插入。 .以一种简单的方式，您的算法将找不到所需的 HTML 插入一切都已加载。

与 $('.some_parent_element').on('click', '.element_desired', function(){...});你可以绕过这个问题，对元素做任何你想做的事。也就是说，让我们坚持老少皆宜的理念，好吗？ :P

answer你提到的有一个非常好的和简洁的解释。尝试理解该答案，因为您在以后的编码中需要理解。

关于为什么 closest 更快

好吧，我们have a great answer here in SO解释“为什么”，所以我会链接到它。但是，总而言之，它围绕着搜索整个文档或文档的特定区域。还有一些库层需要处理才能最终到达您想要的位置。作为附录，查看此 performance test .

文档 说:

parent() gets the parent of each element in the current set of matched elements, optionally filtered by a selector.

closest() For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

有比 parent() 更快的方法和 closest()依赖于“ native ”Java 脚本。但是你应该始终考虑可读性以及老板和客户的固执......

还要考虑您的应用程序的目标受众。当然，可扩展性很重要，但即使某些东西比其他东西慢，如果您的应用程序不大或没有大量数据要处理，那么您使用什么并不重要。只要确保正确地使用它并不断地在需要时进行更改即可。

测试重写的代码

您可以验证经过更改的代码现在是否有效。只需点击下方的“运行代码片段”按钮即可。

$(document).ready(function () {

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

                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))); //make it where any plus subsequently added will add a row
                $newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>")));
                $myTable.append($newRow);
            };

    		$("#myTable").on('click', '.removeRegular', function(){
                
            	$(this).parent().parent().remove();
            
            });


            $(".addRegular").on("click", addRow); //make it so the default row adds a new one.
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<FORM action="" method="post">

    <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 type='button' class="addRegular">+</button></td>                    
                </tr>
            </tbody>

        </table>
        <button type="submit"/> Submit </button>
        </FORM>

关于javascript - 使用 jquery 从表中删除动态添加的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32954734/

26 4 0
文章推荐： 从 LLVM 位码编译对象时无法链接到静态库。
文章推荐： html - 获取动态图像django/wagtail的图像源
文章推荐： c - 文件 IO 性能 C
文章推荐： html - 如何使 autocomplete=off 在 Firefox 的登录/密码字段中工作
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com