<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>初始化表格</title>
<link rel="stylesheet" href="/css/某某.css">
<script type="text/javascript" src="/js/jquery-3.2.1.js" charset="UTF-8"></script>
<style>
* {
padding: 0;
margin: 0
}
a {
text-decoration: none; /*去除下划线装饰*/
color: #2f2f2f;
}
ul, li {
list-style: none; /*去除ul,li前面的点*/
}
body {
font-size: 14px;
font-family: "微软雅黑"
}
</style>
</head>
<body>
<style>
.predictInput{
background: #f3f596;
margin:10px auto;
height: 500px;
width:960px;
position:relative;
}
.predictInput .table-view{
background: #000;
width:500px;
height:400px;
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
.show-btn{
width:120px;
height:30px;
background: #d3c198;
display: block;
text-align: center;
line-height:30px;
margin:20px auto;
}
</style>
<div class="predictInput">
<div class="table-view">
<table frame="border" rules="all" class="table-view">
<caption>测试表</caption>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</table>
</div>
</div>
<a class="show-btn" href="javascript:void(0)" onclick="showTable()">
预测录入
</a>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div id="myTest"></div>
<script>
function showTable(){
//给一个div 绑定 css样式。
//alert(document.querySelector("#myTest").className = "show-btn");
// 这个操作比较好玩。querySelectorAll('选择器名称') 返回的是一个对应节点的数组。
console.log(document.querySelectorAll('.test')[0].className = "show-btn")
}
</script>
</body>
</html>