Javascript 如何在单击位置旁边输出文本？

我有一个表，它输出大约1k条记录

因为有很多记录，我必须点击下来查看所有记录， 但当我向下滚动并单击名称时，它会同时显示输出 放在上面

我如何才能让它显示我在浏览器上单击位置旁边的文本而不向上滚动

我发了一封信。 我不确定使用css或javascript是否更容易实现这一点

<script language="JavaScript">
 $(document).ready(function() {
     $('a').click(function () {
         var StateName = $(this).attr("detail");
         $('#maintext').show();
         $('#output').html(StateName);
     });
 });
</script>

<table class="tablecolors">
      <thead><th scope="col">Name</th><th scope="col">Ext:</th><th scope="col">Title </th></thead>
        <tbody>
        <cfloop query="Corporate"  >
        <cfoutput>
        <tr>
        <td ><a  id="showdata"  detail="Cell:<cfif  #Corporate.emp_cell# eq ""> No Number<cfelse>#Corporate.emp_cell# </cfif> 
        <br/>test">
        #Corporate.emp_namefirst#       
        <td ><div align="center">#Corporate.emp_ext#</div></td>
        <td > <cfif #Corporate.title_id# is not 19>#Corporate.title_name#</cfif> </td>

        </tr>
        </cfoutput>
        </cfloop>

        </tbody>
</table>

    <h2 id="maintext" style="display: none;">Here We will Display </h2>
    <div id="output"></div>

$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
var StateName=$（this.attr（“详细”）；
$（'#maintext'）.show（）；
$（'#output'）.html（StateName）；
});
});
名称：标题
#公司。emp_namefirst#
#Corporate.emp_ext#
#公司名称
这里我们将展示

查看此项以获取鼠标位置。一旦有了它，就可以使用它通过CSS和jQuery根据该值定位文本

$(elem)
  .css('left', value_x + 'px')
  .css('top', value_y + 'px');

编辑 正如Roko在评论中所注意到的，上面的代码可以通过使用对象表示法来改进，如

$(elem).css({
  'top':  value_y,
  'left': value_x
});

您可能是指.css（）。。。也可以使用对象表示法，也不需要“px”，因为默认情况下它是px。是的，当然是元素

.css（）

，而不是

.style（）

。我查看了一些代码，但忘记了我在那里使用了另一个框架。