<div style="width:310px;height:310px; margin-left:35px;float:left;border:1px solid #0F0">310310</div>
<div style="margin:51px 0 0 485px;">
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
<div style="width:265px; height:37px;border:1px solid #0F0">26537</div>
</div>
</div>
第一步：
上。
2插件引用，当的时候，会有很多个文件，但是根据api来看，如果只想做简单的效果，js除了引用juquery外，只需要引用jquerytreetablejs插件，如果想让它有默认的外观样式还需要引入它们的jquerytreetablecss和jquerytreetablethemedefaultcss
第二步：建立table格式
<table id="example-advanced">
<tr data-tt-id="1">
<td>大家电</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>---电视</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>---洗衣机</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="1">
<td>---冰箱</td>
</tr>
</table>
第三步：引入JS
/ 初始化数据 /
$("#example-advanced")treetable({ expandable: true });/ 高亮显示 /$("#example-advanced tbody")on("mousedown", "tr", function() {
$("selected")not(this)removeClass("selected");
$(this)toggleClass("selected");
});/ 点击展开关闭 /<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced')treetable('expandAll'); return false;">展开</a>
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced')treetable('collapseAll'); return false;">关闭l</a>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>网页设计</title>
</head>
<body>
<tablewidth="400px"align="center"border="2"cellpadding="0"cellspacing="1">
<tr>
<td>
<p>这是一个段落。</p>
<br><p>这是另一个段落。</p>
</td>
<td>
这个单元包含一个表格;
<tablewidth="100px"cellspacing="1"cellpadding="1"align="center"border="2">
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
<td>一行四列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
<td>二行四列</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
这个单元包含一个列表：
<ul>苹果</ul>
<ul>香蕉</ul>
<ul>菠萝</ul>
</td>
<td>
HELLO
</td>
</tr>
</table>
</body>
</html>
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td></td>
<tr>
<table>
border----> border:1px solid #000;
cellpadding、cellspacing------>padding
border-collapse:collapse; 表示细边框
<style>table{border-collapse:collapse}
table th,table td{border:1px solid #000; padding:0}
</style>
<table>
<tr>
<th></th>
<td></td>
<tr>
</table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）