![](/img/trans.png)
[英]how to prevent page refresh when removing a row from a table with javascript?
[英]Removing row refresh page jquery
我正在面对我的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()
删除最后一行$("#btn_rmv").click(function()
我的页面上的$("#btn_rmv").click(function()
请指出正确的方向。 提前致谢
我有类似的经历:我使用的是谷歌浏览器,每当我调用一个函数时它都会刷新页面。 你将不得不返回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
上的删除点击处理程序。
在document.ready上,删除按钮尚不存在(因为它们是在运行document.ready代码之后单击“添加”时动态生成的)。 这就是为什么$("#btn_rmv").click(function()...
无法正常工作。
因此,在$("#btnAdd").click
事件中动态插入删除按钮后,您必须向其添加一个单击处理程序。
编辑:
如果您生成具有唯一ID的删除按钮(例如btn_rmv_1,btn_rmv_2等),则可以将以下内容添加到Add-handler(将新按钮附加到DOM后):
$('#btn_rmv_1').click(removeButtonFunction);
有问题的代码不起作用,因为行中使用的k
未定义
value='" + k + "'
如果更正此错误,则下一个问题是您正在创建具有相同id
多个元素,如此处所示
newRow1 += "<br/><button id='btn_rmv'>Remove</button>";
在无效的HTML中,将导致jQuery在查找具有唯一 id
的元素时出现问题。
通过将k
更改为0
并将id
更改为class
, 删除代码将仅在按钮打开时删除当前行 。 我假设您确实要删除该行以及前两行。
$('#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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.