用js完成一个可以展开伸缩的表格还可以变背景色，如图（图片效果先后排序），求解答，谢谢 20
展开全部
回答完毕，采纳即可
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
.* {
margin:0;
padding:0;
border:0;
}
table {
margin:auto;
border-collapse:collapse;
width: 600px;
}
th,td{
width: 200px;
text-align:center;
}
table .left {
text-align:left;
cursor: pointer;
}
.o {
background-color: orange;
}
.y {
background-color: yellow;
}
.w {
background-color:white;
display:none;
}
</style>
<script>
onload = function(){
var trl = document.querySelectorAll(".left");
for(var i = 0; i < trl.length; i++){
trl[i].onclick = function(){
var trs = this.parentElement.parentElement.children;
for(var j = 1; j < trs.length; j++){
trs[j].style.display = !this.dis ? "block" : "none";
}
this.className = !this.dis ? "left y" : "left o";
this.dis = !this.dis ? 1 : 0;
}
}
}
</script>
</head>
<body>
<table id="table">
<tr class="w" style="display:block;">
<th>
姓名
</th>
<th>
性别
</th>
<th>
暂住地
</th>
</tr>
<tr>
<td colspan=3>
<table>
<tr>
<th class="left o" colspan=3>
前台设计组
</th>
</tr>
<tr class="w">
<td>
张三
</td>
<td>
男
</td>
<td>
浙江宁波
</td>
</tr>
<tr class="w">
<td>
李四
</td>
<td>
女
</td>
<td>
浙江杭州
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=3>
<table>
<tr>
<th class="left o" colspan=3>
前台开发组
</th>
</tr>
<tr class="w">
<td>
王五
</td>
<td>
男
</td>
<td>
湖南长沙
</td>
</tr>
<tr class="w">
<td>
啠六
</td>
<td>
男
</td>
<td>
浙江温州
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=3>
<table>
<tr>
<th class="left o" colspan=3>
后台开发组
</th>
</tr>
<tr class="w">
<td>
yugi
</td>
<td>
男
</td>
<td>
游戏王混沌力量
</td>
</tr>
<tr class="w">
<td>
joey
</td>
<td>
男
</td>
<td>
power of chaos
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
更多追问追答
追问
这是javascript?不好意思，我是初学者，
好多没看懂，比如什么·left这些选择器不晓得从哪里来的
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
