Как узнать местоположение клетки

Question

Я пишу скрипт, который управляет очень большой таблицей. Когда пользователь щелкает ячейку таблицы, я хотел бы знать, какую ячейку он щелкнул. * 1001 например *

--------------
|     |      |
|     | Click|
--------------

должен дать мне ссылку на ячейку (1, 1).

В любом случае, я мог бы сделать это с помощью JavaScript. Страница, на которой он работает, использует jquery для других целей, поэтому любые решения, основанные на jquery, также хороши.

РЕДАКТИРОВАТЬ: Чтобы уточнить, верхняя левая ячейка (0, 0). По соображениям производительности событие должно быть привязано к таблице , а не к tds.

Answer 1

Это очень легко сделать с помощью свойства target объекта event:

$('#mytable').click(function(e) {
    var tr = $(e.target).parent('tr');
    var x = $('tr', this).index(tr);
    var y = tr.children('td').index($(e.target));
    alert(x + ',' + y);
});

Этот подход позволяет привязать только один обработчик событий ко всей таблице, а затем выяснить, какая ячейка таблицы была нажата. Это известно как делегирование событий и может быть намного более эффективным в правильной ситуации, и это отвечает всем требованиям. Используя это, вы избегаете привязки события к каждому <td>, и это не требует жестких кодов координат. Итак, если ваш стол выглядит так:

<table id='mytable'>
    <tr>
      <td>hi</td>
      <td>heya</td>
    </tr>
    <tr>
      <td>boo</td>
      <td>weee</td>
    </tr>
</table>

Он сообщит координаты при нажатии. Вы можете сделать что угодно с этим. :)

Если вы считаете, что производительность слишком низкая (в зависимости от размера таблицы), вам придется прибегнуть к жесткому или их сочетанию, возможно, только к жесткому кодированию индекса <tr>, поскольку самое медленное получение, а затем динамическое получение индекса <td>. Наконец, если весь этот бизнес координат совершенно не нужен и вам действительно нужна ссылка на нажатой <td>, вы просто сделаете это:

$('#mytable').click(function(e) {
    var td = $(e.target);
    // go crazy
});

Answer 2

$('td').click(function(event) {
  var row = $(this).parent('tr');
  var horizontal = $(this).siblings().andSelf().index(this);
  var vertical = row.siblings().andSelf().index(row);
  alert(horizontal+','+vertical);
});

Answer 3

Пройдите иерархию DOM ...

Вы должны быть в состоянии сделать это, получив ссылку на узел DOM для ТД, по которому щелкнули, а затем пройдя по цепочке previousSibling назад, пока не достигнете первого столбца, считая по ходу движения.

Когда вы находитесь в начале этой цепочки братьев и сестер (т. Е. Первый TD в строке), parentNode должен быть узлом TR, и с этим вы можете выполнить аналогичную прогулку по previousSibling TR для подсчета количества строк.

.. или пометить каждую ячейку дополнительными атрибутами

В качестве альтернативы, когда вы создаете таблицу, добавьте в каждую ячейку несколько поддельных атрибутов rowidx = "??" и colidx = "??" и получите их с GetAttribute . Если вы хотите использовать допустимый атрибут, вы можете поместить индекс строки и столбца в атрибут axis = "??, ??" .

Answer 4

window.onload = function () {
  document.getElementsByTagName('table')[0].addEventListener('click', function(element) {
    var rowIndex = element.target.parentElement.rowIndex;
    var cellIndex = element.target.cellIndex;
    
    document.getElementById('alert').innerHTML = ('Row index = ' + rowIndex + ', Column index = ' + cellIndex);
 }, false);
}

tr, th, td {
  padding: 0.6rem;
  border: 1px solid black
}

table:hover {
  cursor: pointer;
}

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>
<p id="alert"></p>

Answer 5

при условии, что ваш 1-й ряд, 1-й столбец равен 0,0

var row = 0;
    $('#tblImages > tbody > tr').each( function(){
               var col = 0;

               $(this).children('td').each( function(){

                   $(this).attr("currentRow", row).attr("currentCol", col);
                   col++;
               });
               row++;
        }
        );
    $('#tblImages > tbody > tr > td').click(function(){
        alert( $(this).attr("currentRow") + "   " + $(this).attr("currentCol")); 

Это, безусловно, можно улучшить еще ... но его работа

Answer 6

Вы упомянули очень большую таблицу - было бы неразумно привязывать клик к каждому тд. Лучшим подходом является использование метода .live, если вы все еще используете jquery 1.2.6, вы можете просто привязать событие click к таблице и использовать делегирование события. если вам нужен код для этого запроса.

$("#tableId td").live('click', function () {
     var $this = $(this);
     var x = $this.prevAll().length;
     var y = $this.parent().prevAll.length;
     console.log(x + ", " + y);
});