我有以下代码:
<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> </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 应显示在行下方。但它显示在表格下方，如下所示。
但它应该显示为:
请帮助我。
谢谢!
最佳答案
我有一个简单有效的解决方案来解决您的问题。请查看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());
});
关于javascript - 在html表格的行下方显示div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17878642/