我想要一个包含可扩展行的表格。
因此表格的每一行都可以被“按下”，并且该行被展开并显示另一个“嵌入”表格。
我正在尝试在 JQuery Accordion 之上实现它。
我尝试了以下但它根本不起作用:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<!-- <h3>Section 1</h3> -->
<table>
<tr><td><label>User</label></td><td><input type="text"/></td></tr>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
</div>
</table>
</div>
</body>
</html>
我是否使用了错误的小部件？我在这里搞砸了什么？
最佳答案
我在这里为您添加了 Accordion 示例。希望对您有所帮助。谢谢。
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#table tbody .accordion:hover td:first-child, #applicantTable tbody .accordion.active td:first-child{
border-left:3px solid #000; border-top:none; float:left; overflow: hidden; padding-left: 5px; width:100%;
}
#table tbody tr td{
background-color:#ccc;
}
</style>
<script>
$(function() {
var $list = $('.list');
$list.find("tr").not('.accordion').hide();
$list.find("tr").eq(0).show();
$list.find(".accordion").click(function(){
$(this).fadeTo("fast", 1) ;
$list.find('.accordion').not(this).siblings().fadeOut(500);
$(this).siblings().fadeToggle(500);
$(this).addClass('active');
$list.find('.accordion').not(this).removeClass('active');
$list.find('.accordion').not(this).css("opacity", 0.33);
$list.find('.accordion').not(this).hover(function(){
$(this).fadeTo("fast", 1);},
function(){$(this).fadeTo("fast", 0.33);
});
});
});
</script>
</head>
<body> <table class="table list" id="table">
<thead>
<tr>
<th>Table</th>
</tr>
</thead>
<tbody class="">
<tr class="accordion">
<td>Table Row1 </td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>Table Row 2</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>Table Row 3</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
<tbody>
<tr class="accordion">
<td>Table Row 4</td>
</tr>
<tr class="" style="border-left: 5px solid #000;">
<td colspan="5">>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae diam vitae nisl euismod posuere ut sit amet lectus. Mauris sit amet pharetra augue. Integer dapibus quam in nisi tempor ac egestas velit sollicitudin. Pellentesque ac diam eros. Morbi at tellus eu ipsum lobortis posuere eu eget erat.</td>
</tr>
</tbody>
</table>
</body>
</html>
关于javascript - 尝试使用 JQuery 构建具有可扩展行(嵌入式表)的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21883363/