11

jQueryを使用していない場合、テーブル内でもonClickの行と列(X、Y)を取得する最も効率的な方法は何ですか?

クリックリスナーをテーブルだけに割り当てて、一番上にバブルさせるとうまくいくと思いますが、実際にはHTMLTableElementが得られるだけです。そこから取得したいのは、この 1 つのリスナーからの列番号と行番号です。それは可能ですか？

window.onload = function () {
 document.getElementsByTagName('table')[0].addEventListener('click', function() {
  alert(this.tagName);
 }, false);
}
4

3 に答える 3

20

テーブルにバインドすることはできますが、セル間のスペース (行またはセル インデックスがない) 内をクリックする可能性があります。以下の例では、セル自体にバインドすることを決定したため、常に行とセルのインデックスを保持します。

var tbl = document.getElementsByTagName("table")[0];
var cls = tbl.getElementsByTagName("td");

function alertRowCell(e){
  var cell = e.target || window.event.srcElement;
  alert( cell.cellIndex + ' : ' + cell.parentNode.rowIndex );
}

for ( var i = 0; i < cls.length; i++ ) {
  if ( cls[i].addEventListener ) {
    cls[i].addEventListener("click", alertRowCell, false);
  } else if ( cls[i].attachEvent ) {
    cls[i].attachEvent("onclick", alertRowCell);
  }
}

デモ: http://jsbin.com/isedel/2/edit#javascript,html

テーブル自体にも安全にバインドし、ソース要素に対してチェックを実行して、それがセルであるかどうかを確認できると思います。

var tbl = document.getElementsByTagName("table")[0];

function alertRowCell (e) {
  var cell = e.target || window.event.srcElement;
  if ( cell.cellIndex >= 0 )
    alert( cell.cellIndex + ' : ' + cell.parentNode.rowIndex );
}

if ( tbl.addEventListener ) {
  tbl.addEventListener("click", alertRowCell, false);
} else if ( tbl.attachEvent ) {
  tbl.attachEvent("onclick", alertRowCell);
}

デモ: http://jsbin.com/isedel/5/edit

于 2012-05-08T07:54:36.773 に答える
9

これが最も簡単な方法です。

window.onload = function () {
  document.querySelector('#myTable').onclick = function(ev) {
    var rowIndex = ev.target.parentElement.rowIndex;
    var cellIndex = ev.target.cellIndex;
    alert('Row = ' + rowIndex + ', Column = ' + cellIndex);
  }
}
<table border="1" id="myTable">
    <tr>
        <td>first row first column</td>
        <td>first row second column</td>
    </tr>
    <tr>
        <td>second row first column</td>
        <td>second row second column</td>
    </tr>
    <tr>
        <td>third row first column</td>
        <td>third row second column</td>
    </tr>
</table>

于 2016-11-29T11:41:39.283 に答える
1 
window.onload = function () {
 document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
  alert(e.target);
 }, false);
}
于 2012-05-08T07:50:18.473 に答える