javascript 在html表中的行下方显示div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17878642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 09:57:16 来源:igfitidea点击:
Display div below the row in html table?
提问by user1016403
I have below code:
我有以下代码：
<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>3.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>,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>.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 should be displayed below the row on click of button. but it is displaying below the table as below.
单击按钮时，Div 应显示在行下方。但它显示在表格下方，如下所示。
But it should display as :
但它应该显示为：
Please help me.
请帮我。
Thanks!
谢谢！
回答by Rupam Datta
I've a simple & effective solution to your problem. Please have a look at the 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());
});
回答by user1016403
var $c=$(conDiv);
$(this).parent().parent().after("<tr><td colspan='5'>"+$c.html()+"</td></tr>");
回答by Sergey Kochetov
If you want to position your "content#" divs above your table you should add position:absoluteto them to make top:work
如果您想将您的“内容#”div 放置在您的表格上方，您应该添加position:absolute到它们中以使其top:工作
回答by yeyene
Here is the simple and small script,DEMO http://jsfiddle.net/yeyene/JyfPg/1/
这里是简单小巧的脚本，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>');
}
});
});
回答by El Amor Zeewon
<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>");
}
});
});
You can add and remove the div this way please look at the demo . thanks DEMO:http://jsfiddle.net/zeewon/GpvT8/
您可以通过这种方式添加和删除 div，请查看演示。感谢演示：http: //jsfiddle.net/zeewon/GpvT8/
