Question

我有一个显示查询数据的表。

现在，当我点击＃emp_namefirst＃时，它会显示＃emp_cell＃但显示它在桌子的底部。

如何在＃emp_namefirst＃上单击显示表行旁边的div？

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

        });

    });
</script>
     <table   class="table table-hover table-bordered table-sieve"    >
      <thead><th >Name</th><th >Department</th></thead>

        <tbody>
        <cfloop query="Corporate"  >
        <cfoutput>
        <tr>

        <td ><span style="cursor:default"><a  id="showdata"  detail="Cell: #emp_cell# ">    #emp_namefirst#</td>
        <td >#dept_name# </td>
        </tr>
        </cfoutput>
        </cfloop>

        </tbody>

 </table>
 <div id="output"></div>

Answer 1

我在这里设置了一个演示小提琴：http://jsfiddle.net/43dmvvto/3/

我改变了你的链接以获得课程＆＃34; datalink＆＃34;所以我可以在Jquery中引用它，以便不是每个链接都触发它。

对于该示例，我还复制了您的数据行，因此您可以看到它的实际效果。

  $(document).ready(function() {
         $('a.datalink').click(function () {
            //var StateName = $(this).prop("detail");
            var StateName = $(this).attr("detail");   
            $('#maintext').show();
            $('#output').html(StateName);
            $('#output').css('top',$(this).offset().top);
            $('#output').css('left',($(this).offset().left + parseInt($("#mTable").css('width'))));
            $("#output").css('visibility','visible');
        });

    });

Answer 2

以下应该这样做。我唯一担心的是您重复了id元素的a;使用class会好得多。我建议使用数据属性data-detail。由于div只能是表格中td的子项，因此下面的代码会将您的内容放入div中，然后将div放入td colspan="2" tr下面的新$(document).ready(function() { var out = $('#output'), tr = $('<tr/>'), td = $('<td/>',{colspan:2}); $('a.showdata').click(function () { var StateName = $(this).data("detail"); $('#maintext').show(); out.html( StateName ).parent().is('td') || tr.html( td.html( out ) ); $(this).closest('tr').after( tr ); }); });中被点击的单元格。

$(document).ready(function() {
         var out = $('#output'),
             tr = $('<tr/>'),
             td = $('<td/>',{colspan:2});
         $('a.showdata').click(function () {
            var StateName = $(this).data("detail");   
            $('#maintext').show();
            out.html( StateName ).parent().is('td') || tr.html( td.html( out ) );
            $(this).closest('tr').after( tr );
        });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table   class="table table-hover table-bordered table-sieve"    >
      <thead><tr><th >Name</th><th >Department</th></tr></thead>

        <tbody>
        <tr>
        <td ><span style="cursor:default"><a  class="showdata"  data-detail="Cell: 999-900-9000">John</td>
        <td>IT</td>
        </tr>
        <tr>
        <td ><span style="cursor:default"><a  class="showdata"  data-detail="Cell: 999-900-9111">Jane</td>
        <td>Payroll</td>
        </tr>
        <tr>
        <td ><span style="cursor:default"><a  class="showdata"  data-detail="Cell: 999-900-9222">James</td>
        <td>Operations</td>
        </tr>
        <tr>
        <td ><span style="cursor:default"><a  class="showdata"  data-detail="Cell: 999-900-9333">Mary</td>
        <td>Legal</td>
        </tr>
        </tbody>

 </table>
 <div id="output"></div>

＆＃13;

{{1}}

＆＃13;

如何在表格行旁边显示div？

2 个答案: