0
나는 코드 아래에 있습니다div를 html 테이블의 행 아래에 표시 하시겠습니까?
<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의 위치를 원하는 경우
참고 사항 : Java! = Javascript! –
테이블을 분할하지 않아도됩니다. 이 경우 모든 열 사이에 열 길이를 나타내는 빈 행을 지정할 수 있습니다. [방법 - DIV- 테이블 간 간] (http://www.sitepoint.com/forums/showthread.php?517923-how-to-put-DIV-between-table-rows) –