Получение «координат» ячейки <TD>с использованием jQuery

Question

Я создаю несколько другой веб-сайт, ниже моя HTML-разметка и мой вопрос. Пожалуйста, не откладывайте на эту стену текста, я уверен, что это действительно не сложная проблема для тех, кто знает, что это за вещи, но это требует некоторого объяснения.

<div id="0" class="cell" style="top: 0px; left: 0px;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr id="0">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
            <tr id="1">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>

Эта разметка повторяется в виде мозаики, чтобы заполнить всю страницу. Аналогичный DIV может быть:

<div id="1" class="cell" style="top: 144px; left: 0px;">
    <!-- The rest of the table code here... -->
</div>

Если вы уже не видите его, я создаю множество ячеек по всей странице, отсортированных по DIV. Теперь, когда пользователь нажимает на ячейку (одну из <td>), я хочу получить ее координаты, представленные в виде: 0, 1, 5.

В этом примере 0, 1, 5 - это DIV с идентификатором 0, элементом TR внутри этого DIV с идентификатором 1 и, наконец, ячейкой внутри этого элемента TR с идентификатором 5. Я хотел написать функцию javascript, чтобы получить эти координаты, но я совершенно не знаю, какие параметры передать, и не представляю, как мне получить координаты.

Насколько я могу подумать, когда смогу передать событие щелчка (?) В функцию, я могу посмотреть на родительские элементы <td> и получить их идентификаторы?

Если кто-то может предоставить решение этой проблемы или предоставить какие-либо материалы, это будет с благодарностью.

Answer 1

Поскольку начинать ID с номера недопустимо, я предложу другое решение.

Поскольку ваши идентификаторы в основном являются индексными числами, вы можете использовать метод jQuery .index(), чтобы получить то, что вынужно.

Проверьте это здесь: http://jsfiddle.net/hBarW/

$('td').click(function(){
    var $th = $(this);
    var td_idx = $th.index();
    var tr_idx = $th.closest('tr').index();
    var div_idx = $(this).closest('div').index();
    alert(td_idx + ' ' + tr_idx + ' ' + div_idx);
});

Answer 2

попробуйте

$('td').click(function(){
   var td = this.id;
   var tr = $(this).closest('tr').attr('id');
   var div = $(this).closest('div').attr('id');
});

вы можете проверить его здесь.

подробнее о .closest() здесь

Answer 3

легкая вещь будет

$('td').click(function(){
 $this = $(this);
 alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});

Но у вас есть некоторые проблемы ..

1. вы не можете иметь номера в качестве идентификаторов
2. ID должны быть уникальными внутри DOM ...

Answer 4

Используйте ближайшую функцию jQuery, которая возвращает указанный вами родительский элемент.

Как это:

$("td").click(function () {
   var parentDIVId = $(this).closest("div").attr("id");
   var parentTRId = $(this).closest("tr").attr("id");
   var myId = $(this).attr("id");
}