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

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、效果演示

<html>

<head>

<title>滚动链接</title>

</head>

<script language="JavaScript1.2">

//设置下面的三行参数,分别是宽度、高度和背景色。

var scrollerwidth=150

var scrollerheight=60

var scrollerbgcolor='white'

//下面设置显示的文字内容,可以使用标准的HTML语法。

var messages=new Array()

messages[0]="<a href='http://www.baidu.com/'>百度</a>"

messages[1]="<a href='http://www.sina.com'>新浪</a>"

messages[2]="<a href='http://www.google.com/'>谷歌</a>"

if (messages.length>1)

i=2

else

i=0

function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=5){

tlayer.top=0

setTimeout("move1(tlayer)",3000)

setTimeout("move2(document.main.document.second)",3000)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=5

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(messages[i])

tlayer.document.close()

if (i==messages.length-1)

i=0

else

i++

}

}

function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=5){

tlayer2.top=0

setTimeout("move2(tlayer2)",3000)

setTimeout("move1(document.main.document.first)",3000)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=5

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(messages[i])

tlayer2.document.close()

if (i==messages.length-1)

i=0

else

i++

}

}

function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",3000)

setTimeout("move4(second2)",3000)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=5

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=messages[i]

if (i==messages.length-1)

i=0

else

i++

}

}

function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",3000)

setTimeout("move3(first2)",3000)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=5

setTimeout("move4(second2)",80)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=messages[i]

if (i==messages.length-1)

i=0

else

i++

}

}

function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

}

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

}

window.onload=startscroll

</script><ilayer id="main" width="&{scrollerwidth}" height="&{scrollerheight}" bgcolor="&{scrollerbgcolor}"><layer id="first" left="0" top="1" width="&{scrollerwidth}"><script

language="JavaScript1.2">

if (document.layers)

document.write(messages[0])

</script></layer><layer id="second" left="0" top="0" width="&{scrollerwidth}" visibility="hide"><script language="JavaScript1.2">

if (document.layers)

document.write(messages[1])

</script></layer></ilayer><script

language="JavaScript1.2">

if (document.all){

document.writeln('<span id="main2" style="position:relativewidth:'+scrollerwidth+'height:'+scrollerheight+'overflow:hidenbackground-color:'+scrollerbgcolor+'">')

document.writeln('<div style="position:absolutewidth:'+scrollerwidth+'height:'+scrollerheight+'clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0)left:0top:0">')

document.writeln('<div id="first2" style="position:absolutewidth:'+scrollerwidth+'left:0top:1">')

document.write(messages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolutewidth:'+scrollerwidth+'left:0top:0">')

document.write(messages[1])

document.writeln('</div>')

document.writeln('</div>')

document.writeln('</span>')

}

</script>

<body>

</body>

</html>

(北京八方永信教育)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11448079.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存