[转] JavaScript 动态添加表格/动态添加事件/态设置属性

JavaScript 动态添加表格/动态添加事件/态设置属性

 

JS动态创建表格(新增、删去行和单位格)，动态设置属性，动态新增事务 1、inserRow()和insertDell()函数

　　insertRow()函数可以带参量，情势如次：

　　insertRow(index)：index从0开始

　　这个函数将新行新增到index的那一行前，好比insertRow(0),是将新行新增到第一行之前。默认的insertRow()函数至关于 insertRow(-1)，将新行新增到表的最后。一般我们在使用的时辰都是：objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。

　　insertDell()和insertRow的用法不异，这里就再也不说了。

　　二、deleteRow()和deleteDell()方法

　　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⑴。由于在删去表格行的时辰，表格的行数在变化，这就是问题的关键，rows.length老是在变小，删去的行数老是会比预想的要少一半，所以正确的删去表格的行的代码应该如许：

　　复制内部实质意义到剪贴板代码:

　　function clearRow(){

　　objTable= document.getElementById("myTable");

　　var length= objTable.rows.length ;

　　for( var i=1; i<length; i++ )

　　{

　　objTable.deleteRow(i);

　　}

　　}

　　三、动态设置单位格与行的属性

　　B、采用setBttribute()方法

　　格式如次：setBttribute(属性，属性值)

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

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

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

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

　　var objDell = document.getElementById("myDell");

　　objDell.setBttribute("height",24);//为单位格设置高度为24

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

　　B、直接赋值

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

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

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

　　D、复合属性

　　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 newDellDartonNo = nextRow.insertDell();

　　var cartonNoName = "IptDartonNo";

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

　　newDellDartonNo.setBttribute("className","tablerdd ");

　　5、新增事务 B、无参量的情况

　　function doalter(){

　　alert('hi');

　　}

　　var tr = Table.insertRow();

　　tr.attachEvent("onclick",doalter);

　　或者

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

　　或者

　　tr.οnclick=function(){doalter();};

　　或者

　　tr.οnclick=doalter;

　　B、传参量的方法

　　var trMouseMove = function(obj)

　　{

　　return function()

　　{

　　obj.className='selected';

　　}

　　}

　　var tr = Table.insertRow();

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