Javascript 使用jquery从表中删除动态添加的行_Javascript_Jquery_Html

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

javascript jquery html

Javascript 使用jquery从表中删除动态添加的行,javascript,jquery,html,Javascript,Jquery,Html,我的代码在按下加号时向表中添加一行，并使用正确的引用将其添加，所以当我提交表单数据时，我知道什么是数据。负号我在删除刚刚添加的行或之前从表中添加的另一行时有点困难我想这可能是addRow函数最后一行中的.bind，正如我在这里看到的，它可能应该是.on 无论哪种情况，我的代码都在这里： <script language='javascript' type='text/javascript'> $(document).ready(function () {

我的代码在按下加号时向表中添加一行，并使用正确的引用将其添加，所以当我提交表单数据时，我知道什么是数据。负号我在删除刚刚添加的行或之前从表中添加的另一行时有点困难

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

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

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


$（文档）.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（“单击”，addRow））；//将其设置为随后添加的任何加号将添加一行的位置
$newRow.append（$（“”）.append（$（“-”）.bind（“单击”，RemoveEGULarrow（newRowID）））；
$myTable.append（$newRow）；
};
//出于某种原因，这叫做每次我点击加号，它也不做什么？
函数移除器EGULARROW（索引）{
$（“#regFacEmpType”+索引）.remove（）；
};
$（“.addRegular”）.on（“单击”，addRow）；//使默认行添加一个新行。
});
索引号
教师类型
数据中心
机构预算金额
PI预算金额
PI调整预算
评论
611000
有规律的
$43,0000
$33,0000
+                    
提交

像这样绑定您的单击事件：-

$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", function(){ removeRegularRow(newRowID); })));

$newRow.append（$（“”）.append（$（“-”）.bind（“单击”，函数（）{removeegularrow（newRowID）；}））；

在这行上

$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));

$newRow.append（$（“”）.append（$（“-”）.bind（“单击”，Removeegularrow（newRowID）））；

您正在触发此代码中的函数

.bind（“单击”，RemoveEGularrow（newRowID））

这意味着您正在调用函数，而不是将其指定为处理程序。

此行：

.bind("click", removeRegularRow(newRowID))

这实际上是在调用

removeegularrow（）

函数，并期望返回

函数
您可以通过将其包装到匿名函数中进行更改：
.bind("click", function() { removeRegularRow(newRowID) })

当您进入一个页面中的多个重复元素时，使用ID作为目标元素是最不可取的方法
尝试使ID匹配变得更加复杂，并且基于类和重复元素的结构进行遍历要简单得多
另外，一个处理程序可以管理所有重复元素。以下内容可以放在代码库中的任何位置。。。每页加载一次
$(document).on('click','.removeRegular', function(){
     $(this).closest('tr').remove();  
});

然后在tr
上添加一个可用于ajax请求的数据库标识符
<tr data-id="serverIdValue">

注意关注点的分离…不需要内联代码，也不需要在任何类型的循环中处理此问题。首先，.bind（）
不再是添加处理程序的首选方法。从jQuery 1.7开始，.on（）
是最好的使用方法。第二，在本守则中：
.bind("click", removeRegularRow(newRowID))

实际上，在附加处理程序时，您正在调用removeegularrow
，并将返回值附加到click事件。这显然不是你想要的。您要传递函数引用：
.on("click", function(){ removeRegularRow(newRowID); } ))

但是，更好的方法是附加一个处理程序，使用表本身作为委托，并在removegular
button类上进行过滤：
$('#myTable').on('click', '.removeRegular', function() {
    $(this).parent().closest('tr').remove();
});

这使用一个处理程序，因为它附加到表而不是行，所以您不必担心添加和删除元素时会发生什么（只要表始终存在）。您也不必担心跟踪ID和计算行数等问题，因为该按钮只需查看表行的祖先并将其删除。更简单。解决问题
关于JavaScript代码：

删除bind（）
函数
删除removeegularrow（）
函数
在（'click'..

事件内的

$（文档）上添加以下。准备就绪
：
$("#myTable").on('click', '.removeRegular', function(){

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

});



为什么这能解决眼前的问题
问题是，这一行元素是动态插入的，并且只有在DOM加载了所有内容并被加载之后才被插入。简单地说，您的算法将无法找到所需的HTML插入内容，因为所有内容都已加载
使用$（'.some_parent_element'）。在（'click'，'.element_desired'，function（）{…}）
上，您可以绕过这个问题，并对元素执行任何您想要的操作。也就是说，让我们坚持适合所有年龄段的想法，好吗？：p
你提到的问题有一个非常好的简明的解释。试着理解这个答案，因为你需要理解未来的编码
关于为什么使用最近的
嗯，我们
$("#myTable").on('click', '.removeRegular', function(){

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

});