2

私はテーブルを持っています。各行の終わりには、この行を削除するhref"X"があります。これは非常に簡単です。ここで、任意の行2の[X]をクリックすると、行2が削除されますが、行3をクリックすると、行4が削除されます。

これは私のコードです：

HTML

<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>Custom0</td>
    <td><a title="my title text" id="1" href="#" class="someclass" onclick="deleteRows(0)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom1</td>
    <td> <a title="my title text" id="2" href="#" class="someclass" onclick="deleteRows(1)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom2</td>
    <td> <a title="my title text" id="3" href="#" class="someclass" onclick="deleteRows(2)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom3</td>
    <td> <a title="my title text" id="4" href="#" class="someclass" onclick="deleteRows(3)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom4</td>
    <td> <a title="my title text" id="5" href="#" class="someclass" onclick="deleteRows(4)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom5</td>
    <td> <a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(5)">X</a>

    </td>
  </tr>
</table>

およびJavascript

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  tbl.deleteRow(row);
}

あなたはここでそれをプレイすることができます：http：//jsfiddle.net/nTJtv/13/

4

2 に答える 2

4

行番号をハードコーディングしたため、最初の削除後は同期していません。<table>要素のプロパティ.rowsは「ライブ」であるため、1つを削除すると、数値がHTMLと一致しなくなります。

this.parentNode.parentNode代わりに、関数に渡し、それを使用して削除する行を決定することを検討してください。

<a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(this.parentNode.parentNode)">X</a>

次にremoveChild()、関数で使用します。

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  tbl.getElementsByTagName("tbody")[0].removeChild(row);
}

編集：は要素<tr>の子である<tbody>ため、削除元の親である必要があります。

http://jsfiddle.net/nTJtv/19/

本当にそれを実行したい場合はdeleteRow()、行をループして関数に渡された行を見つけて削除します。

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  // Loop over the table .rows collection to find the one passed into the function
  for (var i=0; i<tbl.rows.length; i++) {
    if (row == tbl.rows[i]) {
      // And delete it
      tbl.deleteRow(i); 
      return;
    }
  } 
}

http://jsfiddle.net/nTJtv/21/

于 2013-01-15T18:01:00.780 に答える
0

このようなことをしてみませんか？jQueryの使用は、既存のファイル/サイトに追加するのは難しくありません。

HTML：

<table id="my_table" cellspacing="0" cellpadding="0">
  <tr>
    <td>Custom0</td>
    <td><span title="my title text" id="1" class="someclass">X</span></td>
  </tr>
  <tr>
    <td>Custom1</td>
    <td><span title="my title text" id="2" class="someclass">X</span></td>
  </tr>
</table>

JavaScript：

$('.someclass').on('click', function() {
  $(this).parent().parent().remove();
});
于 2013-01-15T18:13:27.903 に答える