gpt4 book ai didi

javascript - 删除行刷新页面jquery

转载 作者:行者123 更新时间:2023-11-30 10:32:34 24 4
gpt4 key购买 nike

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

HTML

<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删除 代码将删除按钮打开的当前行。我假设您真的想删除该行以及前面的 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
});

See demo

请注意,自 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
});

关于javascript - 删除行刷新页面jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16032892/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com