大佬教程收集整理的这篇文章主要介绍了HTML / Javascript – 通过单击父行来展开和折叠表行(子项),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<table class="collapse table"> <tr> <th>Age</th> <th>Sex</th> <th>Name</th> <th>From</th> </tr> <tr class="parent"> <td>100</td> <td>M</td> <td>Dodo</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr> <tr class="parent"> <td>100</td> <td>M</td> <td>Dodo</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td>UK</td> </tr>
孩子和父母的数量是灵活的,我想要一个灵活管理这个特征的例子.页面加载时必须关闭子行,并且仅当用户单击父页时才展开.
如果还可以,我想添加一个图标,指示用户点击一行(基本上是“”和“ – ”),但不是一个简单的字符串,一个真正的图标.
我已经看过很多examples了,但是没有人能完美地完成这项工作并试图修改例子……没有成功.其中大多数是基于Datatables的示例,我不想使用它.
你能帮我吗 ?我知道我的问题非常充实,我要求做大部分工作,但没有找到一个完整的例子来做我想要的HTML,CSS,Javascript.
谢谢.
在Andrei Gheorghiu的回答之后编辑:
我希望最终只能点击图标而不是整行,我在同一行上有其他按钮,如果我点击它,它会激活孩子的开放.所以我做了什么,等待更好的解决方案:
HTML:
将“tr”更改为特定的“td”类,并在此“td.toto”类中添加图标行.
JS:
$('table').on('click','td.toto',function(){ console.log("check click works: "); $(this).closest('tbody').toggleClass('open'); });
那么可以遵循您的解决方案结构,但只更改点击目标吗?通过更好的解决方案,我的意思是,现在只点击图标而不是整个“td”.
谢谢.
@H_874_30@$('table').on('click','tr.parent .fa-chevron-down',function(){ $(this).closest('tbody').toggleClass('open'); });
.parent ~ .cchild { display: none; } .open .parent ~ .cchild { display: table-row; } .parent { cursor: pointer; } tbody { color: #212121; } .open { BACkground-color: #e6e6e6; } .open .cchild { BACkground-color: #999; color: white; } .parent > *:last-child { width: 30px; } .parent i { transform: rotate(0deg); transition: transform .3s cubic-bezier(.4,.2,1); margin: -.5rem; padding: .5rem; } .open .parent i { transform: rotate(180deg) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="container"> <table class="table"> <tr> <th>Age</th> <th>Sex</th> <th>Name</th> <th colspan="2">From</th> </tr> <tbody> <tr class="parent"> <td>100</td> <td>M</td> <td>Dodo</td> <td>UK</td> <td><i class="fa fa-chevron-down"></i></td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> </tbody> <tbody> <tr class="parent"> <td>100</td> <td>M</td> <td>Dodo</td> <td>UK</td> <td><i class="fa fa-chevron-down"></i></td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> <tr class="cchild"> <td>10</td> <td>M</td> <td>Child</td> <td colspan="2">UK</td> </tr> </tbody> </table> </div>@H_874_30@ @H_874_30@
以上是大佬教程为你收集整理的HTML / Javascript – 通过单击父行来展开和折叠表行(子项)全部内容,希望文章能够帮你解决HTML / Javascript – 通过单击父行来展开和折叠表行(子项)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。