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

如图，上面的数字2、3、6都是图片。想在下面的表格里面做成鼠标点击就显示相应的数字图片，再点击就消失，求高手指导，js怎么实现。谢谢高分... 如图，上面的数字2、3、6都是图片。想在下面的表格里面做成鼠标点击就显示相应的数字图片，再点击就消失，求高手指导，js怎么实现。谢谢高分展开

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

百度网友fb4c2f3
推荐于2016-05-17 · TA获得超过435个赞

知道小有建树答主

回答量：193

采纳率：0%

帮助的人：174万

我也去答题访问个人页

关注

展开全部

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

（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>