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>