jquery-jExpand-表格操作思路

最新推荐文章于 2020-08-05 13:33:10 发布

原创最新推荐文章于 2020-08-05 13:33:10 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #UP #ViewUI

jQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的数据表格奇偶行交互效果的方法。通过为数据的奇数行添加类并隐藏非奇数行的方式，实现了点击奇数行时仅显示其下一行详细信息的功能。

$(document).ready(function() {
	//好设计,数据奇偶行操作
	//为数据奇数行添加类
	$("#dataTable tr:odd").addClass("odd");
	$("#dataTable tr:not(.odd)").hide();
	//表格导航标题显示
	$("#dataTable tr:first-child").show();

	$("#dataTable tr.odd").click(function() {
		$("#dataTable tr:not(.odd)").not($("#dataTable tr:first-child")).hide();
		//切换下一行显示
		$(this).next("tr").show();
		$(this).find(".arrow").toggleClass("up");

	});
});