我有一个带有表格的网页，表格的每一行都有一个“删除行”链接。
问题是，当我点击删除行时，浏览器会刷新页面。我如何防止他的发生？
这是一个功能完整的 HTML 页面。尝试一下，向下滚动到行，单击链接会使滚动条跳回顶部:
注意:我使用的是 Firefox 11。
<SCRIPT language="javascript">
function deleteRow(rowID) {
try {
var table = document.getElementById("mytable");
var iRowIndex = 0;
while (iRowIndex < table.rows.length) {
var row = table.rows[iRowIndex];
if (row.id == rowID) {
table.deleteRow(iRowIndex);
} else {
iRowIndex++;
}
}
} catch (e) {
alert(e);
}
}
</SCRIPT>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table id="mytable">
<tr id="foo" >
<td>FOO</td>
<td>
<a href="#" onclick="deleteRow('foo')">remove</a>
</td>
</tr>
<tr id="bar" >
<td>BAR</td>
<td>
<a onclick="deleteRow('bar')">remove</a>
</td>
</tr>
</table>
有什么想法吗？
最佳答案
您的页面刷新的原因是因为您的 anchor 标记中的 href="#"。删除它应该会使您的示例工作。
删除 href="#" 片段也会删除悬停在 anchor 元素上的选择器光标。如果您希望保持该样式，只需使用一点 CSS 即可轻松修复。
.myAnchor:hover {
cursor: pointer;
}
关于javascript - 使用javascript从表中删除行时如何防止页面刷新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11619300/