html中如何使用js动态添加表格

JavaScript013

html中如何使用js动态添加表格,第1张

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中,则写在<script>标签内部,如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id,此位置必须是<tbody>内部(不是特别准确,但根据我的测试就得到此结论,有其他的方法请留言,谢谢),如下

复制代码 代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用,但我在写的时候,没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中,要先创建行和单元格,再在<.tbody>中添加行,如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中

有些时候需要动态加载javascript事件的一些方法

往往我们需要在

JS

中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。

方法一、setAttribute

var

obj

=

document.getElementById("obj")

obj.setAttribute("onclick",

"javascript:alert('测试')")

这里利用

setAttribute

指定

onclick

属性,简单,很好理解,

但是:IE

不支持,IE

并不是不支持

setAttribute

这个函数,而是不支持用

setAttribute

设置某些属性,包括对象属性、集合属性、事件属性,也就是说用

setAttribute

设置

style、onclick、onmouseover

这些属性在

IE

中是行不通的。

方法二、用

attachEvent

addEventListener

IE

支持

attachEvent

obj.attachEvent("onclick",

Foo)

function

Foo()

{

alert("测试")

}

也可写在一起

obj.attachEvent("onclick",

function(){alert("测试")})

其它浏览器支持

addEventListener

obj.addEventListener("click",

Foo,

false)

function

Foo()

{

alert("测试")

}

同样也可写在一起

obj.addEventListener("click",

function(){alert("测试")},

false)

注意

attachEvent

的事件带

on,如

onclick,而

addEventListener

不带

on,如

click。

顺便说一下

addEventListener

的第三个参数(虽然很少用)

useCapture

-

如果为

true,则

useCapture

指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何

EventTargets

之前指派给已注册的

EventListener。正在通过树向上

bubbling

的事件将不触发指定的使用捕获的

EventListener。

综合应用

复制代码

代码如下:

if

(window.attachEvent)

{

//IE

的事件代码

}

else

{

//其它浏览器的事件代码

}

方法三、事件

=

函数

例:obj.onclick

=

Foo

这在多个浏览器中均支持,这是属于旧的规范(方法二属于

DOM2

的规范),不过由于使用方便,用的场合也比较多。

下面是我的解决办法:

复制代码

代码如下:

function

show(){

alert("Hello,

world!!!")

}

obj.setAttribute('onclick',document.all

?

eval(function(){show()})

:

'javascript:show()')

用ASP吧,这个办法比较好,别人看不到源码,如果用JS,别人能看你的源码!

<select>

<%for nian=1900 to 2020%>

<option value="<%=nian%>"><%=nian%></option>

<%next%>

</select>