Tablodaki bir hücrenin satır ve sütun numarası nasıl bulunur

Question

jQuery kullanılmıyorken, bir satırın bir satırında bile olsa bir satırda Sat ve Col (X, Y) almanın en etkili yolu nedir?

Sadece masaya bir tıklama dinleyicisi atama ve üstüne köpürmesine izin verirseniz iyi çalışır, ama gerçekten sadece bana HTMLTableElement verir. Ondan almak istediğim, bu bir dinleyicinin Col numarası ve Satır numarasıdır. Mümkün mü?

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

Answer 1

Tabloya bağlama olabilir, ama bu (bir satır veya hücre dizini olmayan) hücreleri arasındaki aralığa içinde tıklayabilir olanak verecek. Aşağıdaki örnekte, hücrelere kendim bağlanacağımı ve böylece her zaman bir satır ve hücre dizinine sahip olacağımı kararlaştırmıştım.

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); 
    } 
} 

Demo:

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); 
} 

: Ben güvenle çok masaya kendisine bağlamak ve bir hücre ya da değil olup olmadığını görmek için kaynak elemanına karşı bir kontrol yapmak herhalde http://jsbin.com/isedel/2/edit#javascript,html

Demo: http://jsbin.com/isedel/5/edit

Answer 2

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

Answer 3

İşte bunu yapmanın en kolay yolu.

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>

ait