求用JS或jquery实现点击表格同步变色
页面打开后如图一的效果,所有表格都有背景色表格颜色的取值范围:01-11红色\12-22绿色\23-33橙色上面的表格有按钮的功能,点击某个表格里的数字后就去掉该数字的背...
页面打开后如图一的效果,所有表格都有背景色表格颜色的取值范围:01-11红色\12-22绿色\23-33橙色上面的表格有按钮的功能,点击某个表格里的数字后就去掉该数字的背景颜色,再次点击该数字恢复背景颜色下面的表格不具备点击变色的功能,只提供显示效果与上面表格的颜色同步.举例如图二点击上面表格中 01 12 33 这几个数字去掉背景颜色,下面的表格中相应的数字也会同时去掉背景颜色.需要完整的一个网页代码,复制后可直接看的
展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tab1,
.tab2{
border-collapse: collapse;
border:none;
width:200px;
}
.tab1 td,
.tab2 td{
border:1px solid #000;
text-align: center;
}
.tab1 td{
cursor: pointer;
}
.tab2{
margin-left:40px;
}
.bg1{
background: red;
}
.bg2{
background: green;
}
.bg3{
background: orange;
}
</style>
</head>
<body>
<menu>
<table>
<tr>
<td>01</td>
<td>11</td>
<td>12</td>
<td>22</td>
<td>23</td>
<td>33</td>
</tr>
</table>
</menu>
<hr>
<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>33</td>
</tr>
<tr>
<td>01</td>
<td>11</td>
<td>12</td>
<td>22</td>
<td>23</td>
<td>33</td>
</tr>
</table>
<script>
;(function(){
var aBtn = document.querySelectorAll('.tab1 td');
var aConTd = document.querySelectorAll('.tab2 td');
~function(){
for(var i=0; i<aConTd.length; i++){
aConTd[i].dataset.cls= aConTd[i].className;
}
}();
function removeConTdBg(text){
for(var i=0; i<aConTd.length; i++){
if(aConTd[i].innerText === text){
aConTd[i].classList.remove(aConTd[i].dataset.cls);
}
}
}
function addConTdBg(text){
for(var i=0; i<aConTd.length; i++){
if(aConTd[i].innerText === text){
aConTd[i].classList.add(aConTd[i].dataset.cls);
}
}
}
for(var i=0; i<aBtn.length; i++){
aBtn[i].bSign=true;
aBtn[i].strClass = aBtn[i].className;
aBtn[i].onclick = function(){
if(this.bSign){
//去掉class，和判断相应的td
this.classList.remove(this.strClass);
removeConTdBg(this.innerText);
}else{
//加上class
this.classList.add(this.strClass);
addConTdBg(this.innerText);
}
this.bSign = !this.bSign;
};
aBtn[i].onmousedown = function(){
return false;
};
}
})()
</script>
</body>
</html>
注意：里面用到了很多h5的新语法，所以低版本的浏览器不兼容，请自行更改。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
