获取HTML表格行位置并在其旁边显示div [英] Getting HTML table row position and showing div next to it

问题描述

我已设法显示< div> ，其中包含相关图片的表格行，但我希望我的< div> 出现在点击的行旁边，如下所示：

< div>

code>显示在它旁边。那么，我如何获得点击行的位置？

我试过
这个和这个解决方案，但它们都返回表的位置而不是行的。

解决方案

下面是一个让你开始使用jQuery的例子 - http://jsfiddle.net/CtWSf/

  $（'td'）。click（function（e）{
 var currentPosition = $（this）.offset（）; 
 $（'。results'）。html （currentPosition.top）; 
}）; 
  

对于这个标记 -

 <表> 
< tr>< td> 1< / td>< / tr> 
< tr>< td> 2< / td>< / tr> 
< tr>< td> 3< / td>< / tr> 
< tr>< td> 4< / td>< / tr> 
< tr>< td> 5< / td>< / tr> 
< / table> 
< div class =results>< / div> 
  

I've managed to show <div> which contains a relevant image to the table row, but I want my <div> to appear next to the clicked row like this:

In this example, when user clicks on second row, <div> is shown right next to it. So, how do I get position of clicked row?

I tried this and this solutions, but they both return the table's position instead of row's.

解决方案

Here is an example to get you started using jQuery - http://jsfiddle.net/CtWSf/

$('td').click(function(e){
    var currentPosition = $(this).offset();
    $('.results').html(currentPosition.top);
});

For this markup -

<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>
<div class="results"></div>

这篇关于获取HTML表格行位置并在其旁边显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！