删除行刷新页面jquery

我的jquery遇到了一个问题。我使用jQuery向表中添加控件，并使用remove按钮删除表中的特定行。这是我的代码，我是如何在表中创建控件。

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

我的jquery代码看起来像这样

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); }); });
删除我正在使用的最后一行。jquery
$(document).ready(function() { $("#controls").delegate("#btn_rmv", "click", function() { $(this).closest("tr").remove(); return false; }); });
单击删除按钮刷新页面并删除我添加的所有行，而不是最后一行。注意:我挖出来的是.delegate是服务器端，它刷新页面。我无法删除最后一行与$("#btn_rmv").click(function()在我的页面
请给我指一下正确的方向。提前感谢

有问题的代码不起作用，因为k未定义，如
行所示
value='" + k + "'
如果此错误被纠正，那么下一个问题是您正在创建具有相同id的多个元素，如下所示

newRow1 += "<br/><button id='btn_rmv'>Remove</button>";
在无效的HTML中，会导致jQuery在查找具有唯一 id的元素时出现问题。

通过将k更改为0并将id更改为class， remove代码将仅删除当前行按钮。我假设您真的想要删除这一行以及前面的两行。

$('#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 });
<
看到演示/strong>
请注意，从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 });

我也有过类似的经历:我使用Google Chrome浏览器，每次我调用一个函数，它都会刷新页面。您将不得不返回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不是很好:(

你可以这样做…

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(); }

看起来您正在连接$(document).ready上的删除单击处理程序。
文档。准备好了，删除按钮还不存在(因为它们是在单击"添加"时动态生成的，在文档之后。就绪代码已运行)。这就是为什么$("#btn_rmv").click(function()...不工作。
因此，在$("#btnAdd").click事件中动态插入remove按钮后，您必须显式地为其添加click处理程序。
编辑:

如果您生成您的删除按钮与唯一的id(例如;btn_rmv_1, btn_rmv_2等)，您可以将以下内容添加到您的add -handler(在将新按钮添加到DOM之后):

$('#btn_rmv_1').click(removeButtonFunction);

相关内容

最新更新

热门标签：