1

テーブルとテーブルの各行に「行を削除」リンクがあるWebページがあります。

問題は、クリックして行を削除すると、ブラウザがページを更新することです。彼の発生を防ぐにはどうすればよいですか？

これが完全に機能するHTMLページです。試してみて、行まで下にスクロールし、リンクをクリックすると、スクロールバーが上にジャンプして戻ります。

注：Firefox11を使用しています。

<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 に答える