Question

我的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


    <style type="text/css">
       table {
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
   }

td {border: 1px solid #000; padding: 5px; vertical-align: top;}

    </style>


    <script type="text/javascript">
        $(document).ready(function() {
        $('#content1').hide();
        $('#content2').hide();
        $('#content3').hide();


$("input").click(function() {
 var thisRow = $(this).closest('tr'); //parent row of the input or whatever is the click trigger
 var conDiv = $(this).data("href"); //returns #content1 - id of the content div you want shown
 var conH = $(conDiv).height(); //corresponding content div height
 var rowH = $(thisRow).height(); // this row height
 var newrowH = conH + rowH; //the new row height
 var posL = $(thisRow).position().left; // left position that div needs to be
 var posT = $(thisRow).position().top + rowH + 5 + 'px';  // top position that div needs to be ** not working properly!!


   if ( $(conDiv).is(":visible") ) {
       $(thisRow).css({"height" : "auto"});
       $(conDiv).css({"display" : "none", "left": "auto", "top" : "auto" });
   } else  {
       //reset all rows to normal height
       $("tr").css({"height" : "auto"}); 
       //expand the height of this row
       $(thisRow).css({"height" : newrowH});

       // reset all content divs.. hide them             
       $("[id*=content]").css({"display" : "none", "left": "auto", "top" : "auto"}); 
       //show the one you want
       $(conDiv).css({"display" : "block", "left": posL, "top" : posT});
   }
});

});
 </script>

</head>
<body>
<div id="table-wrap">
<table summary="test" cellspacing="0" id="master">
    <colgroup>
        <col width="40px">
        <col span="4" width="25%">
    </colgroup>

<thead>
   <tr>
     <th>&nbsp;</th>
     <th><span>Customer</span></th>
     <th><span>OrderID</span></th>
     <th><span>Order date</span></th>
     <th><span>Order Total</span></th>
   </tr>
</thead>

<tbody>
    <tr>
        <td><input type="button" name="" value=" " data-href="#content1" ></td>
        <td>Ernst Handel</td><td>10258</td><td>07/17/1996</td><td>$403.72</td>
    </tr>

    <tr>
        <td><input type="button" name="" value=" " data-href="#content2"></td>
        <td>Wartian Herkku</td><td>10270</td><td>08/01/1996</td><td>$1,376.00</td>
    </tr>

    <tr>
        <td><input type="button" name="" value=" " data-href="#content3"></td>
        <td>Magazzini Alimentari Riuniti</td><td>10275</td><td>08/07/1996</td><td>$15.36</td>
    </tr>

    </tbody>
</table>

<div id="content1">
<h2>content for row 1</h2>
<table>
    <thead>
        <tr>
            <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
        </tr>
    </tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- content1 -->

<div id="content2">
<h2>content for row 2</h2>
<table>
    <thead>
        <tr>
            <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
        </tr>
    </tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- content2 -->
<div id="content3">
<h2>content for row 3</h2>
<table>
    <thead>
        <tr>
            <th>head 1</th><th>head 2</th><th>head 3</th><th>head 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td>
        </tr>
    </tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- content3 -->
</div><!-- table-wrap -->

</body>
</html>

单击按钮时，Div应显示在行下方。但它显示在下表中。

enter image description here

但它应显示为：

enter image description here

请帮帮我。

谢谢！

Answer 1

我有一个简单的＆amp;有效解决您的问题。请查看fiddle

$(document).delegate('input[type="button"]','click',function(){
    $('[colspan="5"]').parent('tr').remove();
    $(this).parents('tr').after('<tr/>').next().append('<td colspan="5"/>').children('td').append('<div/>').children().css('background','#f0f0f0').html($('#content').html());
});

Answer 2

var $c=$(conDiv);

$(this).parent().parent().after("<tr><td colspan='5'>"+$c.html()+"</td></tr>");

Answer 3

如果您想将“内容＃”div放在桌子上方，则应向其添加position:absolute以使top:工作

Answer 4

这是一个简单的小脚本，DEMO http://jsfiddle.net/yeyene/JyfPg/1/

$(document).ready(function () {
    $('#content1').hide();
    $('#content2').hide();
    $('#content3').hide();

    $("input").click(function () {
        if ($('tr#' + $(this).data("href")).is(":visible")) {
            $('tr#' + $(this).data("href")).remove();
        } else {
            $(this).closest('tr').after('<tr id="' + $(this).data("href") + '"><td colspan="5">' + $('#' + $(this).data("href")).html() + '</td></tr>');
        }                       
    });

});

Answer 5

 <table>
    <tr>
        <td><input class="btn" type="button" value="detail"></td>
        <td>
            first row
        </td>
    </tr>
<tr>
        <td><input class="btn" type="button" value="detail"></td>
    <td>second row</td>
   </tr> 
</table>



 $(document).ready(function(){
    $('.btn').click(function(){
        var $current=$(this).parent().parent().index();
        if($(this).hasClass('clicked'))
        {
            var next=$current+1;
            $('table tr:eq('+next+')').remove();
            $(this).removeClass('clicked');
        }else{
        $(this).addClass('clicked');
   var $current= $(this).parent().parent().index();
       $("table tr:eq("+$current+")").after("<tr><td colspan='2'><div>AddedDiv</div></td></tr>");
        }
    });
});

您可以通过这种方式添加和删除div，请查看演示。谢谢 DEMO：http://jsfiddle.net/zeewon/GpvT8/

在html表格中的行下方显示div？

5 个答案: