如何防止页面刷新从JavaScript表中删除行时？

我在表格的每一行都有一个带有表格和“删除行”链接的网页。如何防止页面刷新从JavaScript表中删除行时？

问题是，当我点击删除行，浏览器不会刷新页面。我如何防止他发生？

下面是一个完整功能的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>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</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>

任何想法？

来源

2012-07-23 Robert Hume

在这个例子中，它不会刷新：http://jsfiddle.net/Rc8sQ/ – Mageek 2012-07-23 19:40:57

感谢您的 - 以前从未见过的jsfiddle - 但是当我点击“删除”链接那里，根本不消失。我错误地使用jsfiddle吗？ – 2012-07-23 19:47:26

你可以给每行赋予独特的id，并设置该tbody显示：无。这就是我使用可靠的跨浏览器功能。 – Tschallacka 2012-07-23 19:47:32

您的网页刷新的原因是因为在你的锚标记href="#"的。删除应该让你的例子工作。

卸下href="#"片断也将在锚定元件的悬停去除选择器光标。如果你想保持这种风格，很容易用一个小小的CSS来修复。

.myAnchor:hover { 
    cursor: pointer; 
}

来源

2012-07-23 19:46:21 jgibson

谢谢我尝试删除href，但我仍然有刷新/滚动条跳转问题。任何其他想法？ – 2012-07-23 19:55:34

我将你的示例代码复制/粘贴到jsfiddle中，并且我没有任何问题。这里的的jsfiddle：http://jsfiddle.net/rd63a/ – jgibson 2012-07-23 19:58:36

谢谢，是的，它似乎的jsfiddle工作，但不是我的代码复制粘贴到一个jstest1.html文件，并与Firefox 11或IE 8中打开它。任何想法为什么不呢？ – 2012-07-23 20:06:07

你为什么使用href？你不需要赶上onclick事件吗？

来源

2012-07-23 19:47:56 Riccardo

这是因为您使用了一个<a>链接并为其提供了href="#"属性，因此它将链接（如此刷新）到该页面。

您可以删除href="#"属性，或者阻止函数中链接的默认操作（请参阅下面的代码），或者使用其他类型的控件，如按钮。你总是可以改变CSS的外观。

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
     function displayResult(e) { 
      e.preventDefault(); 
      document.getElementById("myTable").deleteRow(0); 
     } 
     </script> 
    </head> 

    <body> 
     <table id="myTable" border="1"> 
     <tr> 
      <td>cell 1</td> 
      <td>cell 2</td> 
     </tr> 
     <tr> 
      <td>cell 3</td> 
      <td>cell 4</td> 
     </tr> 
     </table> 

     <a href="#" onclick="displayResult(event)">Delete first row</a> 
    </body> 

</html>

来源

2012-07-23 19:56:38 322896

删除'href =“＃”'没有帮助。我还试图'的onclick = “deleteRow（事件， '<%=rowId %>'）”'和'函数deleteRow（事件，ROWID）{e.preventDefault（）; ...' - 但它不再删除行 - 也许我错误地传递了'event'？ – 2012-07-23 20:03:10

如何防止页面刷新从JavaScript表中删除行时？

回答

相关问题