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

【问题标题】：Display div below the row in html table?在html表格中的行下方显示div？
【发布时间】：2013-07-26 10:10:00
【问题描述】：

我有以下代码：

<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 应显示在单击按钮的行下方。但它显示在下表下方。

但它应该显示为：

请帮帮我。

谢谢！

【问题讨论】：

请注意：Java != Javascript！
你不能不拆分表。您可以在每行之间指定一个跨列长度的空行，如此处所示。 how-to-put-DIV-between-table-rows

标签： javascript jquery html

【解决方案1】：

我有一个简单有效的解决方案来解决您的问题。请看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());
});

【讨论】：

@RupamDatta 无论如何 div 可以从行上滑下来吗？

【解决方案2】：

如果您想将“内容#”div 放置在表格上方，您应该将position:absolute 添加到它们以使top: 工作

【讨论】：

【解决方案3】：

这里是简单的小脚本，DEMOhttp://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>');
        }                       
    });

});

【讨论】：

感谢您的回复。我尝试过这个。但是当你隐藏它时，它会不断增加行之间的空间。只需尝试多次单击该按钮。你会看到这个问题。谢谢你的回复
你试过这个演示吗？ jsfiddle.net/yeyene/JyfPg/1我已经改成 remove() 而不是 hide()..
在小提琴中它正在工作。我将代码复制到一个 html 文件中然后它不工作...
aww，我明白了，我也必须更新 html 代码，更新为 ...data-href="content1"... 没有 #.

【解决方案4】：

var $c=$(conDiv);

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

【讨论】：

在$(conDiv).css({"display" : "block", "left": posL, "top" : posT});之前添加，并在'conDiv'中获取div本身而不是id，刚才注意到condiv是一个id
$(this).parent().parent().after("<tr><td colspan='5'><div>my div</div></td></tr>"); 这会添加一个 div 吗？？
@user1016403 你能添加 div 吗？哪一行的高度在增加？
这可能是因为最后的 div 也必须变得可见，拉伸所有内容，查看更新的代码

【解决方案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，请查看演示。谢谢演示：http://jsfiddle.net/zeewon/GpvT8/

【讨论】：