JS动态创建表格，动态设置属性，动态添加事件 .

JS动态创建表格(新增、删除行和单元格)，动态设置属性，动态添加事件




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()方法

　　格式如下：setAttribute(属性，属性值)

　　说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：

　　var objMyTable = document.getElementById("myTable");

　　objMyTable.setAttribute("border",1);//为表格设置边框为1

　　其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

　　var objCell = document.getElementById("myCell");

　　objCell.setAttribute("height",24);//为单元格设置高度为24

　　在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用 setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

　　B、直接赋值

　　var objMyTable = document.getElementById("myTable");

　　objMyTable.border=1;//为表格设置边框为1

　　这个方法也全部适用，呵呵。

      C、复合属性

      var objMyTable = document.getElementById("myTable");

      objMyTable.style.cursor = "pointer";

4、创建表格

　　了解了行<tr>与单元格<td>的增删那就可以创建表格了。

　　第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

　　var objMyTable = document.getElementById("myTable");

　　第二步：创建行与列的对象

　　var index = objMyTable.rows.length-1;

　　var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的

　　//单元格箱号

　　var newCellCartonNo = nextRow.insertCell();

　　var cartonNoName = "IptCartonNo";

　　newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

　　newCellCartonNo.setAttribute("className","tablerdd");

5、添加事件

    A、无参数的情况

    function   doalter(){  

        alert('hi');  

      }  

    var tr = Table.insertRow();

    tr.attachEvent("onclick",doalter);

    或

    tr.setAttribute("onclick","doalter()");

    或

    tr.onclick=function(){doalter();};

    或

    tr.onclick=doalter;

    B、传参数的方法

    var trMouseMove = function(obj)

    {

        return function()

        {

            obj.className='selected';

        }

    }

    var tr = Table.insertRow();

    tr.attachEvent("onmousemove",AddrSelfMouseMove(tr));

newcell = newRow.insertCell();
        			newcell.align = 'center';
        			newcell.innerHTML = '<span class="link-color">'+rowValue[0]+'</span>';
        			newcell.className = "text-left";
        			newcell.id = rowValue[1];
        			newcell.style.cursor = "pointer";
        			newcell.title = ""+rowValue[0]+"";
        			newcell.attachEvent("onclick",function(){modifyTvwallInfo(newcell);});

评论

4 楼 perfect613 2012-09-22  

sinly 写道

perfect613 写道

你好，有个问题请教一下。动态添加行的时候如何给行绑定双击带参数事件？你的是不带参数的啊，谢谢了，急用

你获取到table给table添加双击事件就可以

table.onclick= dblclickIt;

非常感谢

3 楼 sinly 2012-09-17  

perfect613 写道

你好，有个问题请教一下。动态添加行的时候如何给行绑定双击带参数事件？你的是不带参数的啊，谢谢了，急用

你获取到table给table添加双击事件就可以

table.onclick= dblclickIt;

2 楼 sinly 2012-09-17  

等下，我发段代码给你参考

1 楼 perfect613 2012-09-17  

你好，有个问题请教一下。动态添加行的时候如何给行绑定双击带参数事件？你的是不带参数的啊，谢谢了，急用