Как получить смещение вершины элемента td относительно родительского элемента tr?

Question

Как получить смещение вершины элемента td относительно родительского элемента tr?

0

У меня есть следующая манекена html-разметки:

<table>
    <body>
       <tr>
         <td id="cell" style="height: 1000px; width: 200px;"></td>
       </tr>
    </body>
</table>

Мне нужно подписаться на событие click на ячейке и получить верхнюю смещенную относительную родительскую таблицу (tr).

jQuery('#cell', function (e) {
       // get top offset in pixels relative parent tr element
});

Какой лучший способ?

Изменить: я имею в виду, мне нужно получить смещение мышью относительно элемента tr

Erik 20 март 2014, в 17:47

Источник

0

Не уверен, что этот код должен делать, но $('#cell').position().top должен получить то, что вы хотите.
adeneo 20 март 2014, в 15:57
0

Я имею в виду, мне нужно получить смещение мыши
Erik 20 март 2014, в 15:59
0

Я редактировал пост
Erik 20 март 2014, в 16:01

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

0

Наверное, это..?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
table{
  border-collapse:collapse;
  width:200px;
  position:relative;
}
table tr{width:200px;float:left;background-color:red;position:relative;}
table tr td{width:100px;background-color:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //if you want offset from tr
  $('td').click(function(){
       var leftParent=$(this).parent('tr').offset().left
       var topParent=$(this).parent('tr').offset().top
       var left=Math.round(($(this).offset().left)-leftParent);
       var top=Math.round(($(this).offset().top)-topParent)
       alert('top'+top+' left'+left)
      })
    //if you want offset from table  
  $('td').click(function(){
       var leftParent=$(this).parents('table').position().left
       var topParent=$(this).parents('table').position().top
       var left=Math.round(($(this).offset().left)-leftParent);
       var top=Math.round(($(this).offset().top)-topParent)
       alert('top'+top+' left'+left)
      })          

})
</script>
</head>
<body>
<table>
    <tr>
        <td class="cell">aaa</td>
        <td class="cell">bbb</td>
    </tr>
    <tr>
        <td class="cell">ccc</td>
        <td class="cell">ddd</td>
    </tr>
    <tr>
        <td class="cell">eee</td>
        <td class="cell">fff</td>
    </tr>
</table>
</body>
</html>

Devima 20 март 2014, в 14:41

Ещё вопросы

Не уверен, что этот код должен делать, но $('#cell').position().top должен получить то, что вы хотите.
Я имею в виду, мне нужно получить смещение мыши

Diego De Vita · Accepted Answer · 2014-03-20T14-33-00.000Z

Предполагая, что я правильно понял ваш вопрос, этот код должен сделать трюк. Он просто выводит координаты мыши x, y относительно контейнера соты. Выходное предупреждение запускается щелчком мыши по ячейке.

o = $("#cell");
o.click(
    function (e) {        
        offsetX = e.pageX - o.position().left;
        offsetY = e.pageY - o.position().top;
        alert('offsetX: ' + offsetX + '\noffsetY:' + offsetY);
    }
);

http://jsfiddle.net/Dcudb/1/