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

JavaScript022

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

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

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

选择单元格,插入超链接。 注意表格和文件图片最好在同一个文件夹 拷贝的时候直接拷贝文件夹,这要不容易造成链接丢失或者失效。 建议将图片插入到excel的一个工作表中,直接在表里面进行连接,该工作表可以设置为隐藏。