suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Tabellenerweiterung und -faltung mit jQuery_jquery

So implementieren Sie die Tabellenerweiterung und -faltung mit jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:01:151581Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Tabellenerweiterung und -faltung implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist ein sehr benutzerfreundlicher Spezialeffektcode, der es Ihnen ermöglicht, auf eines der übergeordneten Elemente zu klicken und das andere zuvor geöffnete übergeordnete Element automatisch zu schließen 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery表格展开折叠，默认折叠</title>
<style>
table{ border:0;border-collapse:collapse;}
td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th{ font:bold 12px/17px Arial;text-align:left;
padding:4px;border-bottom:1px solid #333;
width:100px;
}
.parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/
.odd{ background:#FFFFEE;} /* 奇数行样式*/
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
 $(".parent").click(function(){
 $(this).toggleClass("selected");
 $(this).siblings().not(".parent").not(":first-child").hide();
 $(this).next().show().next().show();
 });
})
</script>
</head>
<body>
<table>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
<tr class="parent" id="row_01">
<td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</table>
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nodejs implementiert einfach die chinesische und englische ÜbersetzungNächster Artikel：Nodejs implementiert einfach die chinesische und englische Übersetzung

In Verbindung stehende Artikel

Mehr sehen