三层可折叠table

最新推荐文章于 2024-07-03 10:36:14 发布

forest91

最新推荐文章于 2024-07-03 10:36:14 发布

阅读量1.5k

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/forest91/article/details/53695428

版权

这篇博客介绍了如何使用JavaScript实现三层可折叠的表格功能。通过点击图片触发事件，改变图片旋转角度并切换相应表格行的显示状态，实现了表格的展开和收起效果。涉及CSS3的transform属性以及DOM操作。

摘要由CSDN通过智能技术生成

table.js

$(function() { $('img.img_css').click(function () { var id = $(this).closest("td").closest("tr").attr("id"); var value = $("#span_" + id).text(); if (value == 0) { flagValue = "rotate(180deg)"; $("#span_" + id).text(1); } else if (value == 1){ flagValue = "rotate(360deg)"; $("#span_" + id).text(0); }else{ } $('img#img_' + id).css("-webkit-transform", flagValue); $('img#img_' + id).css("-moz-transform", flagValue); $('img#img_' + id).css("-ms-transform", flagValue); $('img#img_' + id).css("transform", flagValue); $(this).closest("td").closest("tr").siblings('.child-' + id).toggle(); }).click(); $('img.img_title_css').click(function () { var id = $(this).closest("th").closest("tr").attr("id"); var value = $("#span_" + id).text(); //alert(id); if (value == 0) { flagValue = "rotate(180deg)"; $("#span_" + id).text(1); $("#tbody_" + id).css("display", "none"); } else if (value == 1){ flagValue = "rotate(360deg)"; $("#span_" + id).text(0); $("#tbody_" + id).css("display", ""); } $('img#img_' + id).css("-webkit-transform", flagValue); $('img#img_' + id).css("-moz-transform", flagValue); $('img#img_' + id).css("-ms-transform", flagValue); $('img#img_' + id).css("transform", flagValue); }).click(); });

table.css

@CHARSET "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
	padding: 10px 10px;
}

.demo {
	width: 600px;
	margin: 40px auto;
	font-family: 'trebuchet MS', 'Lu