1

我有一个带有表格的网页，表格的每一行都有一个“删除行”链接。

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

这是一个功能齐全的 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>

有任何想法吗？

4

3 回答 3

2

您的页面刷新的原因是href="#"在您的锚标记中。删除它应该使您的示例工作。

删除href="#"片段也会在锚元素悬停时删除选择器光标。如果您希望保持这种样式，只需一点 css 即可轻松修复。

.myAnchor:hover {
    cursor: pointer;
}
于 2012-07-23T19:46:21.093 回答
0

你为什么使用href？您不需要捕获 onclick 事件吗？

于 2012-07-23T19:47:56.507 回答
0

这是因为您使用了<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-23T19:56:38.640 回答