投稿
  1. 首页
  2. 随笔

html表格可折叠的三级分类是什么？

不干胶标签纸 • 2023-4-7 • 随笔 • 阅读 9

html表格可折叠的三级分类是什么？,第1张

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

<title>CSS+JavaScript三级折叠菜单</title>

<style>

*,body,ul,li,h1,h2 {

margin: 0

padding: 0

list-style: none

}

body {

font: 12px "宋体"

padding-top: 20px

}

#menu {

width: 200px

margin: auto

}

#menu h1 {

cursor: pointer

color: #FFF

font-size: 12px

padding: 5px 0 3px 10px

border: #C60 1px solid

margin-top: 1px

background-color: #F93

}

#menu h2 {

cursor: pointer

color: #777

font-size: 12px

padding: 5px 0 3px 10px

border: #E7E7E7 1px solid

border-top-color: #FFF

background-color: #F4F4F4

}

#menu ul {

padding-left: 15px

height: 100px

border: #E7E7E7 1px solid

border-top: none

overflow: auto

}

#menu ul li {

padding: 5px 0 3px 10px

}

.no {

display: none

}

</style>

<script language="JavaScript">

function ShowMenu(obj, noid) {

var block = document.getElementById(noid)

var n = noid.substr(noid.length - 1)

if (noid.length == 4) {

var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")

var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")

for (var i = 0i <h2.lengthi++) {

h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")

h2[i].style.color = ""

}

obj.style.color = "#FF0000"

for (var i = 0i <ul.lengthi++) {

if (i != n) {

ul[i].className = "no"

}

}

} else {

var span = document.getElementById("menu").getElementsByTagName("span")

var h1 = document.getElementById("menu").getElementsByTagName("h1")

for (var i = 0i <h1.lengthi++) {

h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")

h1[i].style.color = ""

}

obj.style.color = "#0000FF"

for (var i = 0i <span.lengthi++) {

if (i != n) {

span[i].className = "no"

}

}

}

if (block.className == "no") {

block.className = ""

obj.innerHTML = obj.innerHTML.replace("-", "+")

} else {

block.className = "no"

obj.style.color = ""

}

}

</script>

</head>

<body>

<div id="menu">

<h1 onClick="javascript:ShowMenu(this,'NO0')">- 一级菜单A</h1>

<span id="NO0" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO00')">- 一级菜单A_1</h2>

<ul id="NO00" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO01')">- 一级菜单A_2</h2>

<ul id="NO01" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO02')">- 一级菜单A_3</h2>

<ul id="NO02" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO03')">- 一级菜单A_4</h2>

<ul id="NO03" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

<li>一级菜单A_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO1')">- 二级菜单B</h1>

<span id="NO1" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO10')">- 二级菜单B_1</h2>

<ul id="NO10" class="no">

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO11')">- 二级菜单B_2</h2>

<ul id="NO11" class="no">

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO2')">- 三级菜单C</h1>

<span id="NO2" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO20')">- 三级菜单C_1</h2>

<ul id="NO20" class="no">

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

<li>三级菜单C_5</li>

<li>三级菜单C_6</li>

<li>三级菜单C_7</li>

<li>三级菜单C_8</li>

<li>三级菜单C_9</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO21')">- 三级菜单C_2</h2>

<ul id="NO21" class="no">

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO3')">- 四级菜单D</h1>

<span id="NO3" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO30')">- 四级菜单D_1</h2>

<ul id="NO30" class="no">

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO31')">- 四级菜单D_2</h2>

<ul id="NO31" class="no">

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

<li>四级菜单D_4</li>

<li>四级菜单D_5</li>

</ul>

</span>

</div>

</body>

</html>

把一下代码直接新建HTML保存，你看下效果。刚写的，有问题再联系我。

<div id="iddiv" style="width:200pxheight:200pxoverflow:hiddenborder: 1px solid blue">

<table >

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

</table>

</div>

asdfaf

<script type="text/javascript">

var id = setTimeout("fnGo()",2000)

function fnGo(){

var div = document.getElementById("iddiv")

div.style.height = parseFloat(div.style.height) + 1

if( parseFloat(div.style.height) >= 1000){

clearTimeout(id)

}else{

id = setTimeout("fnGo()",50)

}

}

</script>

1,使用传统的方法

<table width="400">

<tr>

<td width="100"></td>

<td width="100"></td>

<td width="100"></td>

<td width="100"></td>

</tr>

<table>

2,使用css

<style>

.td{width:100px}

</style>

<table width="400">

<tr>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

</tr>

<table>

以上两种方法可能出现的问题就是,如果内容超过设定,如图片宽度大于100,会自然撑开,自动调节表格宽度

3,用css

<style>

.td{width:100pxoverflow:hidden}

</style>

<table width="400">

<tr>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

<td class="td"></td>

</tr>

<table>

用这种方法,可以把超过的部分隐藏掉,如果需要严格控制的话,可以采用这种方法,如果把overflow的属性值设置成scroll或者auto的话,可以在超过的时候使用滚动条调节

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7610114.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
不干胶标签纸 不干胶标签纸 一级用户组
0 0
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表（0条）

保存