Browse Source

update

master
xykjlcx 10 months ago
parent
commit
4bbf2b12f7
3 changed files with 62 additions and 4 deletions
  1. +5
    -0
      css/tree-table.css
  2. +55
    -2
      index.html
  3. +2
    -2
      js/tree-table.js

+ 5
- 0
css/tree-table.css View File

@@ -1,3 +1,8 @@
.treeTable {
border-collapse: collapse;
width:100%
}

.treeTable tr:nth-child(odd) {
background-color: rgb(222, 222, 222);
}


+ 55
- 2
index.html View File

@@ -10,15 +10,68 @@
<script src="./js/index.js"></script>
<link rel="stylesheet" href="./css/tree-table.css">
<title>树形表格</title>

<style>
.right1{
margin-right: 0px;
transition: all 0.3s ease-out;
transform: rotate(0deg);
}

.right2{
transition: all 0.3s ease-out;
margin-right: 0px;
transform: rotate(90deg);
}

.nonSelect {
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

}
</style>
</head>
<body>


<div id="main" style="width: 800px;margin: 0 auto">
<table id="testTb" class="treeTable" border="1" style="border-collapse: collapse" width="100%">
<table id="testTb" class="treeTable" border="1">
<tr>
<td>
<span class="right1 nonSelect" style="display: inline-block;width: 20px" onclick="test()">▶</span>
<span style="display: inline-block;width: 80%;background-color: dodgerblue">1</span>
</td>
<td>小王</td>
<td>小王</td>
<td>小王</td>
</tr>
</table>
</div>


<script>
function test() {
$(".right1").toggleClass("right2");
var tempStr =
`
<tr id="qwe">
<td>
<span style="display: inline-block;width: 20px"></span>
<span style="display: inline-block;width: 80%;background-color: dodgerblue">2</span>
</td>
<td>小张</td>
<td>小张</td>
<td>小张</td>
</tr>
`;
$("#testTb").append(tempStr);
$("#qwe").animate({
height: 40
});
}
</script>
</body>
</html>

+ 2
- 2
js/tree-table.js View File

@@ -8,8 +8,8 @@ $.fn.treeTable = function (options) {
const headers = options.headers;
const dataList = options.dataList;

renderHeaders();
renderDataRow();
// renderHeaders();
// renderDataRow();


$(this).bind('reloadTable', reloadTable);


Loading…
Cancel
Save