js中如何动态给一个表格中的某一个单元格添加一个超链接作为单元格内容?

JavaScript011

js中如何动态给一个表格中的某一个单元格添加一个超链接作为单元格内容?,第1张

思路:获取行对象→获取列对象→使用innerHTML为单元格添加超链接内容,实例演示如下:

1、HTML结构

<table id = "test">

<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>

<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>

<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>

<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>

</table>

第<input type="text" id="row">行第<input type="text" id="col">列<input type='button' value='确定' onclick="fun()"/>

2、javascript代码

function fun(){

row = document.getElementById("row").value - 1

col = document.getElementById("col").value - 1

tr = document.getElementById("test").getElementsByTagName("tr")

td = tr[row].getElementsByTagName("td")[col]

td.innerHTML = "<a href='#'>超链接</a>"

}

3、效果演示

1、创建超链接节点

var a=document.createElement("a")

2、为节点赋值href属性

a.href="网址"

3、设置超链接页面显示的内容

a.innerText="我是超链接"+i

4、把节点添加到页面上

document.body.appendChild(a)

实现代码如下:

<script language="javascript">

<!--

function Foo()

{

//do something

}

//-->

</script>

<img src="http://www.veryhuo.com/images/bbslogo_8831.gif" _fcksavedurl="http://www.veryhuo.com/images/bbslogo_8831.gif">

<a href="javascript:Foo()" _fcksavedurl="javascript:Foo()">使GIF动画静止的链接</a><br /><center>烈火网更多教程,请访问:<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>

解决方法探讨:

<a onclick="javascript:Foo()">链接</a>

此时不影响动画显示,但鼠标移上去后,鼠标及超链接样式不发生变化,虽然可以利用样式表来改变鼠标及超链接样式,但毕竟有些繁琐,况且这种思路也不好。

再考查如下代码:

<a onclick="javascript:Foo()" href="#">链接</a>

可以发现,虽然点击链接后不影响动画显示,但页面总是滚到最上面,这种效果也不是我们想要的。

最终解决方法:

<a onclick="javascript:Foo()return false" href="#">不影响GIF的链接</a>

由于点接链接后,先触发onclick,再执行href属性对应的值,在onclick中加上return false中断了执行,所以页面就不会跳到最上部了。