javascript 动态创建表格:新增、删除行和单元格
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。
1、inserRow()和insertCell()函数
insertRow()函数可以带参数,形式如下:
insertRow(index):index从0开始
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。
insertCell()和insertRow的用法相同,这里就不再说了。
2、deleteRow()和deleteCell()方法
deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始
和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除:
var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性,嘿嘿
objTable.deleteRow(index);
在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的:
function clearRow(){
objTable= document.getElementById("myTable");
for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}
这段代码要删除原来的表格的表体,有两个问题。首先不能是deleteRow(i),应该是deleteRow(1)。因为在删除表格行的时候,表格的行数在变化,这就是问题的关键,rows.length总是在变小,删除的行数总是会比预想的要少一半,所以正确的删除表格的行的代码应该这样:
function clearRow(){
objTable= document.getElementById("myTable");
var length= objTable.rows.length ;
for( var i=1; i<length; i++ )
{
objTable.deleteRow(i);
}
}
3、动态设置单元格与行的属性
A、采用setAttribute(
相关文档:
//String.prototype使用
//批量替换,比如:str.ReplaceAll([/a/g,/b/g,/c/g],["aaa","bbb","ccc"])
String.prototype.ReplaceAll=function (A,B) {
var C=this;
for(var i ......
函数
即使函数确实有返回值,也不必明确地声明它。该函数只需要使用return运算符后跟要返回的值即可。
例:
function sum(iNum1, iNum2)
{
  ......
闭包:
ECMAScript支持闭包。所谓闭包,就是函数能使用函数外定义的变量。
var iBaseNum = 10;
function addNumbers(iNum1, iNum2)
{
function doAddition()
......
在做一个项目中,接触到了JavaScript,主要是点击一个查询按钮然后弹出一个网页对话框,当在对话框中输入查询条件,点击确定后又返回到原来页面,得出查询结果。
页面如图:
在前台加了一个隐藏的DIV,里面放入两个控件。如下:
<div style="display:none">
< ......
按钮式:
<INPUT name="pclog" type="button" value="/GO" onClick="location.href='http://game.unimagic.cn'">
链接式:
<a href="javascript:history.go(-1)">返回上一步</a>
<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>
直接跳转式:
<scrip ......