在html表格的行下面显示div？ [英] Display div below the row in html table?
本文介绍了在html表格的行下面显示div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码：
< html xmlns =http://www.w3.org/1999/ XHTML>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js >< /脚本>
< style type =text / css>
table {
table-layout：fixed;
宽度：100％;
border-collapse：collapse;
}
td {border：1px solid＃000;填充：5px; vertical-align：top;}
< / style>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃content1'）。hide（）;
$（'＃content2'）。hide（）;
$（'＃content3'）。hide（）;
$（input）。click（function（）{
var thisRow = $（this）。最接近（'tr'）; //输入的父行或任何点击触发
var conDiv = $（this）.data（href）; //返回＃content1 - 内容div的id你想显示
var conH = $（conDiv）.height（）; //相应的内容div高度
var rowH = $（thisRow）.height（）; //这行高度
var newrowH = conH + rowH; //新行高度
var posL = $（thisRow）.position（）。left; //左边位置div必须是
var posT = $（thisRow ）.position（）。top + rowH + 5 +'px'; //顶部位置div需要**不能正常工作!!
if（$（conDiv） .is（：visible））{
$（thisRow）.css（{height：auto}）;
$（conDiv）.css（{display：none ，left：auto，top：auto}）;
$ else {
//将所有行重置为正常高度
$（tr）。css（{height：auto}）;
//展开此行的高度
$（thisRow）.css（{height：newrowH}）;
//重置所有内容div ..隐藏它们
$（[id * = content]）。css（{display：none，left： auto，top：auto}）;
//显示你想要的
$（conDiv）.css（{display：block，left：posL，top：posT}）;
}
}）;
}）;
< / script>
< / head>
< body>
< div id =table-wrap>
< table summary =testcellspacing =0id =master>
< colgroup>
< col width =40px>
< col span =4width =25％>
< / colgroup>
< thead>
< tr>
th& nbsp;< / th>
< th> span> Customer< / span>< / th>
th< span> OrderID< / span>< / th>
< th> span>订单日期< / span>< / th>
< th> span>订单总计< / span>< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>< input type =buttonname =value =data-href =＃content1>< / td>
< td>恩斯特亨德尔< / td>< td> 10258< / td>< td> 07/17/1996< / td>< td> $ 403.72< / td>
< / tr>
< tr>
< td>< input type =buttonname =value =data-href =＃content2>< / td>
< td> Wartian Herkku< / td>< td> 10270< / td>< td> 08/01/01< / td>< td> $ 1,376.00< / td>
< / tr>
< tr>
< td>< input type =buttonname =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>行1的
< h2>内容< / h2>
< table>
< thead>
< tr>第b个头第1个头第2个头第3个头第4个头第1个头第2个头第3个头第4个头
< / tr>
< / thead>
< tbody>
< tr>
< td> cell 1< / td>< td> cell 2< / td>< td> cell 3< / 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>行2的
< h2>内容< / h2>
< table>
< thead>
< tr>第b个头第1个头第2个头第3个头第4个头第1个头第2个头第3个头第4个头
< / tr>
< / thead>
< tbody>
< tr>
< td> cell 1< / td>< td> cell 2< / td>< td> cell 3< / 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>行3的
< h2>内容< / h2>
< table>
< thead>
< tr>第b个头第1个头第2个头第3个头第4个头第1个头第2个头第3个头第4个头
< / tr>
< / thead>
< tbody>
< tr>
< td> cell 1< / td>< td> cell 2< / td>< td> cell 3< / 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应显示在行下方。但它显示在下面的表格中。
但它应该显示为：
请帮助我。
谢谢！
解决方案
我有一个简单的&有效解决您的问题。请看小提琴
<$ p $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$' ）.parent（'tr'）。remove（）;
$（this）.parents（'tr'）。after（'< tr />'）。next（）。append（'< （'td'）。append（'< div />'）。children（）。css（'background'，'＃f0f0f0'）。html（$ td colspan =5/> （'#content'）。html（））;
}）;
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>$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 should be displayed below the row on click of button. but it is displaying below the table as below.
But it should display as :
Please help me.
Thanks!
解决方案
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());
});
这篇关于在html表格的行下面显示div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
