js怎么实现点击表格图片显示和消失

如图,上面的数字2、3、6都是图片。想在下面的表格里面做成鼠标点击就显示相应的数字图片,再点击就消失,求高手指导,js怎么实现。谢谢高分... 如图,上面的数字2、3、6都是图片。想在下面的表格里面做成鼠标点击就显示相应的数字图片,再点击就消失,求高手指导,js怎么实现。谢谢高分 展开
 我来答
百度网友fb4c2f3
推荐于2016-05-17 · TA获得超过435个赞
知道小有建树答主
回答量:193
采纳率:0%
帮助的人:173万
展开全部

这个问题其实想要实现的效果不难,但关键在于你的数据是灵活变化的还是固定不变的?

(1)如果是固定的,我是指(表格大小,长宽,位置均不变,但图片内容是可以变化的),这个就很容易写,我写了一个简单的Demo

HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
.sel tr td{ 
width: 80px; 
background:#09f; 
height: 20px;
text-align: center;
color:#fff;
cursor: pointer;
}
table tr td img{display: none;} /*这里我先把图片隐蔽了*/
</style>
</head>
<body>
<table>
<tr>
        <!-- 给图片添加一个ID -->
<td><img src='../picture/01.jpg' id='img1' /></td>
<td><img src='../picture/02.jpg' id='img2' /></td>
<td><img src='../picture/03.jpg' id='img3' /></td>
</tr>
</table>

<table class="sel">
     <tr>
             <!--直接在td上添加事件,并传入指定的参数-->
     <!-- 这个参数就是对应图片的ID -->
         <td onclick="fToggle('img1')" >1</td> 
        <td onclick="fToggle('img2')" >2</td>
<td onclick="fToggle('img3')" >3</td>
</tr>     
</table>
</body>
<script type="text/javascript">
function fToggle(objId){

//触发事件后,根据传入的参数获取对应的图片的display值
var state = document.getElementById(objId).style.display;

//再进行设置显示或是隐藏就行了
if( state == 'block' ){
document.getElementById(objId).style.display = 'none';
}
else{
document.getElementById(objId).style.display = 'block';
}
}
</script>
</html>

(2)如果是变化的(指图片多少,表格大小均可以变化),那这里就相对复杂些,不过思路依然是可以沿用上面的思路去做的!这里我就不写了,比较麻烦

追问
你的代码不需要jquery吗?我就问 ,辛苦你了 。这么长的代码
追答

用jQuery也可以啊,代码量相对少些,我看你写的用JS实现,以为用原生的JavaScript实现给你,jQuery的话,通过选择器会方便得多。同样上面的例子的话,不需要给<img>标签添加ID了

,不过要给包含<img>标签的<table>标签加个标记,比如添加个类样式class='imgT';

<script type="text/javascript">
    $(function(){
        $('table.sel tr td').click(function(){
            $('table.imgT tr td:eq('+$(this).index()+')').toggle(); 
        });
    });
</script>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式