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

How to output text next to where you click?

本文关键字：输出 文本 位置 单击      更新时间：2023-09-26

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

由于有许多记录，我必须向下点击才能全部查看，但当我向下滚动并点击名称时，它会同时显示输出放在上面。

我如何才能让它在不向上滚动的情况下显示我在浏览器上点击的位置旁边的文本？

我做了一个http://jsfiddle.net/xhow5n44/。我不确定这是否是用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>

请参阅下面的堆栈溢出答案以获取鼠标位置。一旦你有了它，你就可以使用它通过CSS和jQuery根据这些值来定位你的文本。

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

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

$(elem).css({
  'top':  value_y,
  'left': value_x
});
相关文章：