1

I am facing an issue with my jquery. I have used jQuery to add controls to table, along with a remove button to remove that particular row in table. here is my code on how i am creating controls in table.

HTML

<table id="controls" cellpadding="10" cellspacing="10">
</table>
<input id="btnAdd" type="button" value="Add" />

my jquery code looks like this

jquery

$(document).ready(function() {
            $("#btnAdd").click(function() {
        var field = $("#field").val();
                var year = new Date().getFullYear()
                var DDL_fromProfession = "<select name='ParametersFromProf' id='DDL_FromProYear'>";
                for (var i = 1950; i <= year; i++) {
                    DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                }
                DDL_fromProfession += "</select>";
                var DDL_ToProfession = "<select name='ParametersToProf'  id='DDL_ToProYear'>";
                for (var i = 1950; i <= year; i++) {
                    DDL_ToProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                }
                DDL_ToProfession += "</select>";

                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
                 + DDL_fromProfession + " to " + DDL_ToProfession + "</td></tr>"
                 + "<tr><td align='center' style='font-size:large;color:#212121;' height'35px'>"
                 + "<input type='checkbox' name='chkbx_CurrPro' value='" + k + "'>I currently work here</input>";
                newRow1 += "<br/><button id='btn_rmv'>Remove</button>";


                var input = "<input name='parameters' id='field' type='text' />";
                var input1 = "<input name='parametersCompany' id='field' type='text'/>"

                //var inputCurrent="<input name='Current' id='Currfield' type='hidden'/>"

                var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>"
                 + input + " at " + input1 + "</td></tr>";
                $('#controls').append(newRow);
                $('#controls').append(newRow1);
            });
        });

to remove last row i am using. jquery

$(document).ready(function() {

            $("#controls").delegate("#btn_rmv", "click", function() {
                $(this).closest("tr").remove();
                return false;
            });
        });

clicking on remove button refresh the page and remove all the rows that i have added instead of last one. NOTE: What i ahve digged out is .delegate is server side and it refresh the page. i am unable to remove last row with $("#btn_rmv").click(function() on my page

Please point me to right direction. Thanks in advance

4

4 回答 4

1

我有类似的经历：我使用的是谷歌浏览器，每次调用函数时它都会刷新页面。您将不得不返回 false。我的问题是当我使用“onclick”从元素调用函数时。当我从 onclick 调用该函数时，我必须包含“return false;”：

onclick="return false; functionName()"

试试这个，看看它是否有效：

$(document).ready(function() {
    $("#btnAdd").click(function() {
        /* YOUR CODE */

        return false;
    });
});

或者这个，看看它是否有效：

$(document).ready(function() {
    $("#btnAdd").click(function() {
        /* YOUR CODE */            
    });

    return false;
});

抱歉，我的 Javascript 不是很好 :(

于 2013-04-16T09:26:15.233 回答
1

有问题的代码不起作用k，因为未定义，如行中使用的那样

value='" + k + "'

如果此错误得到纠正，那么下一个问题是您正在创建多个相同的元素id，如此处所示

newRow1 += "<br/><button id='btn_rmv'>Remove</button>";

这在无效的 HTML 中会导致 jQuery 在查找具有唯一 id性的元素时出现问题。

通过更改kfor0并将其更改id为 a class，删除代码将仅删除按钮打开的当前行。我假设您确实想删除该行以及前 2 行。

$('#controls').delegate('.btn_rmv', 'click', function() {
    var index = $(this).closest('tr').index() + 1 // as nth-child is 1-based indexing
    $('#controls tr:nth-child(n+' + (index - 2) + '):nth-child(-n+' + index + ')').remove(); // remove 3 rows
    return false
});

看演示

请注意，自 jQuery 1.7 以来，.delegate()已被取代，.on()因此更新后的函数为：

$('#controls').on('click', '.btn_rmv', function() {
    var index = $(this).closest('tr').index() + 1
    $('#controls tr:nth-child(n+' + (index - 2) + '):nth-child(-n+' + index + ')').remove();
    return false
});
于 2013-04-16T09:49:57.753 回答
1

你可以这样做..

   var RowCount = 0;

    $(document).ready(function() {

        $("#btnAdd").click(function() {
            RowCount = RowCount + 1;

            var newRow1 = "<tr id='tr" + RowCount + "'><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
             + DDL_fromProfession + " to " + DDL_ToProfession + "</td></tr>"
             + "<tr><td align='center' style='font-size:large;color:#212121;' height'35px'>"
             + "<input type='checkbox' name='chkbx_CurrPro' value='" + k + "'>I currently work here</input>";

            newRow1 += "<br/><button id='btn_rmv' onclick='RemoveRow(" + RowCount + ")'>Remove</button>";
        });

    });

    function RemoveRow(RowID) {
        $('#RemoveRow' + RowID).remove();
    }
于 2013-04-16T09:27:50.460 回答
1

看起来您正在将删除单击处理程序连接到$(document).ready.

在 document.ready 上，移除按钮尚不存在（因为它们是在 document.ready 代码运行后单击“添加”时动态生成的）。这就是为什么$("#btn_rmv").click(function()...不工作。

因此，在$("#btnAdd").click事件中动态插入删除按钮后，您必须明确地向其添加点击处理程序。

编辑：

如果您生成具有唯一 id 的删除按钮（例如 btn_rmv_1、btn_rmv_2 等），您可以将以下内容添加到您的添加处理程序（在将新按钮附加到 DOM 之后）：

$('#btn_rmv_1').click(removeButtonFunction);
于 2013-04-16T09:28:24.940 回答